0

当按下按钮时，我试图让屏幕像硬币一样翻转。到目前为止，我所做的是我已经成功地翻转了两个小屏幕，但是屏幕有点大，代码不起作用。就像在我的代码中，两个简单的按钮工作正常，但是当我从其他大屏幕调用视图时，视图不会显示。我认为这是因为将被翻转的视图变得不可见但仍保留在其位置上，并且其他视图无法放置在该空间上，因此当涉及到更大的屏幕时，整个事情都不会显示出来。我是 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

翻转.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>
        );
    }
}

后端.js

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

1 回答 1

0

您可以为此使用 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

于 2019-02-21T11:30:21.813 回答