您如何像在React Native中的硬币过渡一样翻转屏幕

Question

我试图在按下按钮时将屏幕像硬币一样翻转。我现在所做的事情是我已经成功翻转了两个小屏幕，但是这有点大屏幕，代码不起作用。像我的代码一样，两个简单的按钮正常工作，但是当我从其他大屏幕调用视图时，视图不会显示。我认为这是因为将要翻转的视图变得不可见，但仍留在其位置，其他视图不能放在该空间上，因此，在更大的屏幕上，整个事物都不会出现。我是RN的新手。帮助。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
var screenWidth = require('Dimensions').get('window').width;
export default class animatedbasic extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
    this.value = 0;
    this.animatedValue.addListener(({ value }) => {
      this.value = value;
    })
    this.frontInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['0deg', '180deg'],
    })
    this.backInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['180deg', '360deg']
    })
    this.frontOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [1, 0]
    })
    this.backOpacity = this.animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [0, 1]
    })
  }
  flipCard() {
    if (this.value >= 90) {
      Animated.spring(this.animatedValue,{
        toValue: 0,
        friction: 8,
        tension: 10
      }).start();
    } else {
      Animated.spring(this.animatedValue,{
        toValue: 180,
        friction: 8,
        tension: 10
      }).start();
    }
  }
  render() {
    const frontAnimatedStyle = {
      transform: [
        { rotateY: this.frontInterpolate }
      ]
    }
    const backAnimatedStyle = {
      transform: [
        { rotateY: this.backInterpolate }
      ]
    }
    return (
      <View style={{ flex:1, justifyContent:'center', alignItems:'center'}} >
        <View >
          <Animated.View style={[styles.flipCard, frontAnimatedStyle, {opacity: this.frontOpacity}]}>
          </Animated.View>
          <Animated.View style={[styles.flipCard, styles.flipCardBack, backAnimatedStyle, {opacity: this.backOpacity}]}>
          <View>
             <TouchableOpacity onPress={() => this.flipCard()} style={{ width:(screenWidth/2), height:70, backgroundColor:'black'}}>
 <Text style={{color:'white', fontSize:22, fontWeight:'bold'}}>  I am on Back</Text>
                </TouchableOpacity>
             </View>
          </Animated.View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flipCard: {
    backfaceVisibility: 'hidden',
  },
  flipCardBack: {
    top: 0,
  },
});

我也尝试了 react-native-native-card-flip

flipping.js

  render() {
        return (
          <CardFlip style={styles.cardContainer} ref={(card) => this.card 
            =card}>
          <FronEnd />
          <Backend />
        </CardFlip> }

fronend.js

 render()
    {
        return (
            <View>
                 <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
            ....................................................
   <TouchableOpacity onPress={() => this.card.flip()}
</TouchableOpacity >
               </CardFlip>
            </View>
        );
    }
}

Backend.js

 render()
    {
        return (
            <View>
                <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
            .......................
<TouchableOpacity onPress={() => this.card.flip()}
</TouchableOpacity >
               </CardFlip>
            </View>
        );
    }

Answer 1

您可以使用NPM模块：

安装：

npm install --save react-native-card-flip

用法：

import CardFlip from 'react-native-card-flip';

  <CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
    <TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>AB</Text></TouchableOpacity>
    <TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>CD</Text></TouchableOpacity>
  </CardFlip>

请参阅输出

npm模块：github