如何使用平面列表从一个屏幕导航到另一个屏幕

Question

我对整个编码工作还很陌生，现在我终于找到了我的第一个无法解决的代码相关神话！我的问题是，我根本找不到一种方法来使用FlatList，使我可以导航到另一个屏幕！(我正在使用Stack Screen，我的8项长平面列表中的每一项都链接到另一个屏幕，或者至少我试图到达那里(以下是我的包含平面列表的屏幕代码：

import React, { Component } from 'react';
import {
FlatList,
StyleSheet, Text,
View
} from 'react-native';
import 'react-native-gesture-handler';
import { Card } from 'react-native-paper';
import { withNavigation } from 'react-navigation';
//export default
class listTest extends Component {
constructor(props) {
super(props);
this.state = {
helpersList: [
{ ID: 1, title: '💭 Memories' },
{ ID: 2, title: '🐱 Cute Cats' },
{ ID: 3, title: '🎥 Funny Vids' },
{ ID: 4, title: '🌱 Vegan Recipes' },
{ ID: 5, title: '🤣 Random Jokes' },
{ ID: 6, title: '🧠 Random Knowledge' },
{ ID: 7, title: '🚰 Hydration' },
{ ID: 8, title: '🤪 Memes' },
]
};
}
navFunction = (item) => {
//const navigation = useNavigation();
if (item.ID === 1) {
navigation.navigate('💭 Nice Memories')
//alert('Whats Up Slappers')
}
else if (item.ID === 2) {
navigation.navigate('🐱 Cute Cats')
//alert('Whats Up Slappers 2')
}
else if (item.ID === 3) {
navigation.navigate('🎥 Funny Vids')
}
else if (item.ID === 4) {
navigation.navigate('🌱 Vegan Recipes')
}
else if (item.ID === 5) {
navigation.navigate('🤣 Random Jokes')
}
else if (item.ID === 6) {
navigation.navigate('🧠 Random Knowledge')
}
else if (item.ID === 7) {
navigation.navigate('🚰 Hydration')
}
else if (item.ID === 8) {
navigation.navigate('🤪 Memes')
}
}
render() {
return (
<View>
<FlatList
data={this.state.helpersList}
renderItem={({ item }) =>
<Card style={styles.card} onPress={() => this.navFunction(item)}>
<View>
<Text style={styles.cardText}>
{item.title}
</Text>
</View>
</Card>
}
keyExtractor={item => item.ID}
/>
</View>
)
}
}
const styles = StyleSheet.create({
card: {
borderRadius: 10,
backgroundColor: '#146b3a',
paddingHorizontal: 15,
paddingVertical: 40,
marginVertical: 5,
marginHorizontal: 16,
shadowColor: "black",
shadowOffset: { width: 0, height: 0, },
shadowOpacity: 1,
shadowRadius: 5,
},
cardText: {
color: "white",
fontSize: 20,
}
})
export default withNavigation(listTest);

现在我遇到的主要问题是，找不到变量"navigation"！我尝试了多种导航方法，但一种都无法使用。现在我在导出时被"withNavigation"卡住了，但它似乎也不对！

感谢您的时间和帮助！

Answer 1

useNavigation是一个钩子，用于访问navigation对象。这也使您可以访问Functional Component中的navigation对象。您可以查看他们的文档。

CCD_ 5是通过CCD_ 8给予CCD_ 7对象访问的CCD_。因此，如果使用withNavigation包装组件，则可以通过props访问它。官方文件。

在你的navFunction中，你可以使用这样的东西。

const { navigation } = this.props;
navigation.navigate('💭 Nice Memories')
.
.
navigation.navigate('🐱 Cute Cats')