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

时间:2018-08-22 07:21:24

标签: react-native react-navigation

用例: 从FlatList中,单击一项,转到“详细信息”页面。

Wind绕说明: 我有一个屏幕,我不想出现在“选项卡”或“抽屉”菜单中(不需要在导航栏上有一个项目),但是除非将项目添加到“抽屉”或“选项卡导航器”中,否则我将无法导航至该项目页面。

如果我确实将它们添加到“选项卡”或“抽屉导航器”中,则该路径有效。

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

我可以共享我的“抽屉”和“选项卡”导航器,但是如果我添加Item,它们也可以正常工作,但是我不希望Item显示在菜单中。

为此花了几个小时,我很困惑。感谢您的协助!

1 个答案:

答案 0 :(得分:1)

在您的

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

导航指向哪条路线?您可能有一个Stacknavigator,其中有2个屏幕-您的标签/抽屉导航器和Itemscreen。您可以发送带有screenProps的导航器,以便仍可以在Tab / Drawer导航器中访问Stacknavigator。

检查SO-thread中的答案,您可能理解我的意思。