React Native Flip Card 不支持翻转

Posted 2023-05-07

【中文标题】React Native Flip Card 不支持翻转

【英文标题】：React Native Flip Card not Working on flip

【发布时间】：2021-10-31 03:35:12

【问题描述】：

我正在尝试制作翻转纸牌游戏。我使用 GestureFlipView 进行翻转卡片动画。我想在 3X3 网格中显示这些翻转卡，为此我使用了 react native。但是问题是卡片没有被翻转，并且它也表现出模糊的行为。只有最后一张卡工作正常，其他卡的行为不可预测。

Github 仓库：https://github.com/akhilomar/React-Native-Number-Game

卡屏：https://i.stack.imgur.com/Cliww.png

卡片组件

import View, Text, SafeAreaView, TouchableOpacity from 'react-native';
import GestureFlipView from 'react-native-gesture-flip-card';

const Cards = (props) => 

    const [flipType, setFlip] = useState('left');

    useEffect(() => 

    )


    const renderFront = () => 
        return(
            <TouchableOpacity onPress = () => 
                this.flipView.flipRight() 
                setFlip('right');
                console.log("Pressed" + `$props.val`)
        
         >
            <View style = backgroundColor:'red', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'>
                <Text style = color: "white", fontSize: 20>Swipe Me</Text>
                

            </View>
            </TouchableOpacity>
        );
    ;

    const renderBack = () => 
        return(
        <View style = backgroundColor:'blue', width: 100, height: 100, alignItems: 'center', justifyContent: 'center'>
            <Text style = color: "white", fontSize: 30>props.val</Text>
            /* <TouchableOpacity onPress = () => 
                (flipType === 'left') ? this.flipView.flipRight() : this.flipView.flipLeft();
                setFlip((flipType === 'left') ? 'right' : 'left');
        
          style = padding: 10, backgroundColor: 'purple', width: 100, height: 40, alignItems: 'center', justifyContent: 'center'>
                <Text style = color: 'white'>Reverse</Text>
            </TouchableOpacity> */

        </View>
        );
    ;
    //ref = (ref) => this.flipView = ref

    return(
        <SafeAreaView style = flex: 1, alignItems: 'center', justifyContent: 'center'>
            <GestureFlipView ref = (ref) => this.flipView = ref  width=300 height = 500>
                renderFront()
                renderBack()
            </GestureFlipView>
        </SafeAreaView>
    );


export default Cards;```

**Card List Component**

```import React from 'react';
import SafeAreaView, View, FlatList, Dimensions, StyleSheet  from 'react-native';
import Cards from './Cards';

const CardScreen = () => 

    // const data = ['1','2','3','4','5','6','7','8','9'];

    const DATA = [
      
        id: '1',
        title: '1',
      ,
      
        id: '2',
        title: '2',
      ,
      
        id: '3',
        title: '3',
      ,
      
        id: '4',
        title: '4',
      ,
      
        id: '5',
        title: '5',
      ,
      
        id: '6',
        title: '6',
      ,
      
        id: '7',
        title: '7',
      ,
      
        id: '8',
        title: '8',
      ,
      
        id: '9',
        title: '9',
      
      
    ];

      const Shuffle = (arr1) => 
        var ctr = arr1.length, temp, index;
        while (ctr > 0) 
            index = Math.floor(Math.random() * ctr);
            ctr--;
            temp = arr1[ctr];
            arr1[ctr] = arr1[index];
            arr1[index] = temp;
        
        return arr1;
      

      const numColumns = 3;
      const size = Dimensions.get('window').width/numColumns;
      const styles = StyleSheet.create(
        itemContainer: 
          width: size,
          height: size,
        ,
        item: 
          flex: 1,
          margin: 3,
          backgroundColor: 'lightblue',
        
      );
    
    return(
      <>
        <FlatList
            data=DATA
            renderItem=( item ) => (
                <View style=styles.itemContainer>
                    <Cards val = item.value/>
                </View>
            )
            keyExtractor=item => item.id
            numColumns=numColumns />

          /* 
            data.map((index, item) => 
              return(
              
              <View style=styles.itemContainer>
                    <Cards val = item/>
              </View>
              );
            )
           */
      </>
    );


export default CardScreen;```

【参考方案1】：

您需要正确使用ref。你可以阅读它here

const Cards = (props) => 
  //first define ref
  const flipViewRef = React.useRef();


  //in onPress use it like this
  <TouchableOpacity onPress = () => 
        flipViewRef.current.flipRight() 
        ...     
  >

  //in GestureFlipView assign it like this
  <GestureFlipView ref=flipViewRef />
  

【参考方案2】：

您遇到问题的主要原因是您在功能组件中使用了this 引用。正如here 所解释的，this 的值将取决于函数的调用方式，甚至可能是undefined。使用this 的更可靠方法来自class context。对于 React，这意味着使用类组件，而不是功能组件，这就是这里使用的。你可以阅读函数和类组件here。

需要考虑的其他一点是FlatList 是否适合此处。通常，此组件用于improve performance 以呈现大型列表。我建议不要使用FlatList，而是使用更简单的东西，例如一组View 组件来抽牌。这是基于您的代码的完整示例：

import React,  useState  from 'react';
import  View, Dimensions, StyleSheet, Text, TouchableOpacity  from 'react-native';
import GestureFlipView from 'react-native-gesture-flip-card';

const Card = (props: any) => 

  const [flipType, setFlip] = useState('left');

  let flipView: any;
  const onFrontPress = () => 
    flipView.flipRight()
    setFlip('right');
  
  const cardDimensions =  width: 0.9 * props.size, height: 0.9 * props.size ;

  const renderFront = () => 
    return (
      <TouchableOpacity onPress=onFrontPress style=[styles.front, cardDimensions]>
        <Text style=styles.frontText>Swipe Me</Text>
      </TouchableOpacity>
    );
  ;

  const renderBack = () => 
    return (
      <View style=[styles.back, cardDimensions]>
        <Text style=styles.backText>props.val</Text>
      </View>
    );
  ;

  return (
    <GestureFlipView ref=(ref) => flipView = ref width=props.size     height=props.size>
      renderFront()
      renderBack()
    </GestureFlipView>
  );


const CardRow = () => 
  const size = Dimensions.get('window').width / 3;
  return (
    <View style=styles.rowContainer>
      <Card size=size />
      <Card size=size / width: 0.9 * props.size, height: 0.9 * props.size >
      <Card size=size />
    </View>
  );


const CardScreen = () => 
  return (
    <View style=styles.container>
      <CardRow />
      <CardRow />
      <CardRow />
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flexDirection: 'column',
    flex: 1,
  ,
  rowContainer: 
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  ,
  back: 
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center'
  ,
  backText: 
    color: "white",
    fontSize: 30
  ,
  front: 
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  frontText: 
    color: "white",
    fontSize: 20
  

);

export default CardScreen;