Как вы переворачиваете экран, как монеты перехода в реагировать родной? - PullRequest
Новая
       58

Как вы переворачиваете экран, как монеты перехода в реагировать родной?

0 голосов
/ 21 февраля 2019

Я пытаюсь заставить экран переворачиваться как монета при нажатии на него кнопки.До сих пор я успешно переворачивал два маленьких экрана, но на немного большем экране код не работает.Как здесь, в моем коде две простые кнопки работают нормально, но когда я вызываю view с другого большого экрана, он не отображается.Я думаю, это потому, что перевернутое представление становится невидимым, но остается на своем месте, и другое представление не может быть помещено в это пространство, поэтому, когда дело доходит до большого экрана, все это не отображается.Я новичок в 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,
  },

});

Я также пытался реагировать-нативная карта-флип

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>
        );
    }

1 Ответ

0 голосов
/ 21 февраля 2019

Для этого можно использовать модуль 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

...