时间戳

首页 > 解决方案 > 如何导航到未显示在 BottomTabNavigator 或 DrawerNavigator 中的屏幕

react-native - 如何导航到未显示在 BottomTabNavigator 或 DrawerNavigator 中的屏幕

问题描述

用例：从 FlatList 中，单击一个项目转到详细信息页面。

冗长的解释：我有一个屏幕我不想出现在我的选项卡或抽屉菜单中（不需要在我的导航栏上有一个项目），但除非我将项目添加到我的抽屉或选项卡导航器中，否则我不能导航到项目页面。

如果我确实将它们添加到选项卡或抽屉导航器，那么该路径有效。

来自 Items.js

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

我可以共享我的抽屉和选项卡导航器，但如果我添加项目，它们工作正常，但我不希望项目出现在我的菜单中。

在这上面花了几个小时，我被难住了。感谢您的协助！

标签： react-nativereact-navigation

解决方案

在你的

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 - 您的选项卡/抽屉导航器和您的 Itemscreen。您可以使用 screenProps 发送导航器，以便您仍然可以访问 Tab/Drawer 导航器中的 Stacknavigator。

检查SO-thread中的答案，您可能会明白我的意思。

推荐阅读