我正在嘗試制作一個翻轉卡片游戲。我使用GestureFlipView來做翻牌影片。我想在3X3的網格中顯示這些翻轉卡片，為此我使用了react native。但是問題出現了，卡片沒有被翻轉，而且還顯示了模糊的行為。只有最后一張卡片作業正常，其他卡片的行為無法預測。
Github Repo: https://github.com/akhilomar/React-Native-Number-Game
CardScreen。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 = (/span>) => {
return(
<TouchableOpacity onPress = {（）/span> =>/span> {
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>/span>
</View>/span>
</TouchableOpacity>/span>
);
};
const renderBack = (/span>) => {
return(
<View style = {{backgroundColor: 'blue', width: 100, height: 100, alignItems: 'center', justifyContent: 'center' }}>
<Text style = {{color: "white", fontSize: 30}}> {props. val}</Text>{props.
{/* <TouchableOpacity onPress = {（）/span> => {
(flipType =='left') ? this.flipView.flipRight() : this.flipView.flipLeft()。
setFlip((flipType === 'left') ? '右'：'左'）。)
}}style = {{padding: 10, backgroundColor: '紫色', width: 100, height: 40, alignItems: 'center', justifyContent: 'center'}}>
<Text style = {{color: 'white'}}>Reverse</Text>/span>
</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>/span>
);
}
export default Cards;````。
**卡片串列組件**
``import React from 'react' ;
import {SafeAreaView, View, FlatList, Dimensions, StyleSheet } from 'react-native'/span>;
import Cards from './Cards' ;
const CardScreen = (/span>) => {
// const data = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];/span>
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,
高度: size,
},
item: {
flex: 1,
margin: 3,
backgroundColor: 'lightblue',
}
});
return(
<>/span>
<FlatList[/span
data={DATA}
renderItem={({ item }) =>/span> (
<View style={styles.itemContainer}>
<Cards val = {item.value}/>
</View>/span>
)}
keyExtractor={item => item.id}。
numColumns={numColumns}。/>
{/* {
data.map((index, item) => {
回傳(
<View style={styles.itemContainer}> /span>
<Cards val = {item}/>
</View>/span>
);
})
} */}
</>)
);
}
export default CardScreen;````。
uj5u.com熱心網友回復：
你需要正確使用ref。你可以閱讀一下這里
const Cards = （props）=> {
/first define ref
const flipViewRef = React.useRef（）。
//in onPress這樣使用它。
<TouchableOpacity onPress = {（）/span> =>/span> {
flipViewRef.current.flipRight()
...
}} >
//在GestureFlipView中像這樣分配
<GestureFlipView ref={flipViewRef} />/span>
uj5u.com熱心網友回復：
造成你的麻煩的主要原因是你在一個功能組件中使用了this參考。正如這里解釋的那樣，this的值將由函式的呼叫方式決定，甚至可能是undefined。使用this的更可靠的方法是從class context。對于 React 來說，這意味著使用類組件，而不是功能組件，也就是這里所使用的。您可以閱讀有關函式和類組件的內容這里。
另外需要考慮的是FlatList在這里是否合適。通常情況下，該組件用于提高渲染大型串列的性能。與其使用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 = (/span>) => {
flipView.flipRight()
setFlip('right') 。
}
const cardDimensions = { width: 0.9 * props.size, height: 0.9 * props.size };
const renderFront = (/span>) => {
return (
< TouchableOpacity onPress={onFrontPress} style={{style. front, cardDimensions] }>
<Text style={styles. frontText}>Swipe Me</Text>
</TouchableOpacity>
);
};
const renderBack = (/span>) => {
return (
<View style={[style.back, cardDimensions]}>
<Text style={styles. backText}>{props.val}</Text>
</View>
);
};
return (
<GestureFlipView ref={（ref）/span> => flipView=ref} width={props.size} height={props.size}>
{renderFront()}
{renderBack()}
</GestureFlipView>
);
}
const CardRow = (/span>) => {
const size = Dimensions. get('window').width /3。
return (
<View style={styles.rowContainer}> /span>
<Card size={size} />
<Card size={size} /{ width: 0。 9 * props.size, height: 0.9 * props.size }>/span>
<Card size={size} />
</View>
);
}
const CardScreen = () => {
回傳 (
<View style={styles.container}>
<CardRow />
<CardRow />>
<CardRow />>
</View>
);
}
const styles = StyleSheet.create({
容器。{
flexDirection: 'column',
flex: 1,
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
},
背面。{
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: '居中
},
backText: {
color: "white",
字體大小: 30
},
front: {
backgroundColor: 'green',
alignItems: 'center',
justifyContent: '居中'。
},
frontText: {
color: "white",
字體大小: 20
}
});
輸出默認的CardScreen。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319406.html
標籤：