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-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>

请参见Output

Npm模块：Github

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

1 个答案: