使用案例:从FlatList中,单击项目转到详细信息页面。
Long Winded说明:我有一个屏幕,我不想出现在我的Tab或抽屉菜单中(我的导航栏上不需要一个项目),但除非我将项目添加到我的抽屉或Tab Navigators,否则我不能导航到“项目”页面。
如果我确实将它们添加到Tab或抽屉导航器中,则该路径有效。
export default class Items extends React.Component {
state = {
loading: false,
data: json_data.features,
error: null,
}
Navigate_To_Item = (item) => {
// This works without Navigator present
console.log(item)
// This only works if I have Item in my Drawer or Tab Nav
this.props.navigation.navigate('Item', {item});
}
render() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.headline}>List of Items</Text>
<FlatList
data={this.state.data}
renderItem={({ item }) =>
<TouchableWithoutFeedback
onPress={() => this.Navigate_To_Item(item)} >
<View style={styles.listContainer}>
<Text style={styles.item}>{item.properties.name</Text>
<Text style={styles.land}>{item.properties.descrption}</Text>
</View>
</TouchableWithoutFeedback>
}
/>
</SafeAreaView>
)
}
}
我可以分享我的抽屉和标签导航器但是,如果我添加项目,它们工作正常,但我不希望项目显示在我的菜单中。
花了几个小时,我很难过。谢谢你的帮助!
在你的
Navigate_To_Item = (item) => {
// This works without Navigator present
console.log(item)
// This only works if I have Item in my Drawer or Tab Nav
this.props.navigation.navigate('Item', {item});
}
导航指向哪条路线?你可以拥有一个有2个屏幕的Stacknavigator - 你的标签/抽屉导航器和你的项目屏幕。您可以使用screenProps发送导航器,这样您仍然可以访问Tab / Drawer导航器中的Stacknavigator。
检查SO-thread的答案,你可能会明白我的意思。