Question

在嵌套导航器上完成React Navigation tutorial时，我发现选项卡导航器MainScreenNavigator会覆盖堆栈导航器SimpleApp。结果是在该对象中调用的选项卡式屏幕是唯一显示的屏幕。未发生的预期行为是链接到嵌套导航器的按钮永远不会显示，因此我无法访问ChatScreen对象。

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

我花了好几个小时试图理解我可能错过的东西。这是我第一次尝试学习这个软件包，所以我不知道教程是否错误，或者我错过了一个打破这个过程的细节。整个App.js文件位于here。

非常感谢您的帮助。

Answer 1

首先，您需要将StackNavigator的导航传递到Tabs的屏幕。因为它们只是屏幕，所以现在可以处理，因为它是初始屏幕。

const MainScreenNavigator = TabNavigator({
  Recent: { screen: ({screenProps}) => <RecentChatsScreen screenProps={screenProps}/>,
  All: { screen: ({screenProps}) => <AllContactsScreen screenProps={screenProps}/> },
});

//I added the export keyword.
export const SimpleApp = StackNavigator({
  Home: { 
    screen: ({navigation}) => <MainScreenNavigator screenProps={{myStackNavigation:navigation}}/>,
    navigationOptions: {
      title: 'My Chats',
    },
  },
  Chat: { screen: ChatScreen },
})

现在，您可以在RecentChatsScreen或AllContactsScreen中调用以下代码。

this.props.navigation.screenProps.myStackNavigation.navigate('Chat');

React Navigation - 嵌套导航器教程：TabNavigator覆盖StackNavigator

1 个答案: