React Native中如何用navigation.navigate打开深层嵌套导航器的指定屏幕

React Navigation 原生支持嵌套路由定向跳转，无需修改现有导航结构，只需调整跳转时的传参格式即可实现直接打开目标深层子屏幕。

具体修改 #

找到StackScreen组件内的Button点击逻辑，将原有跳转代码替换为嵌套screen参数写法：

<Button
  title="Go to stack Screen"
  onPress={() => {
    navigation.navigate('MyTabs', {
      // 指定底部导航层的目标页面
      screen: 'MyMatches',
      params: {
        // 指定TopTab层的目标页面
        screen: 'MyMatches2'
      }
    });
  }}
/>

实现逻辑 #

嵌套导航结构中，每一层导航器的目标页面都需要对应层级的screen参数指定：

• 最外层Stack导航先定位到底部导航容器页MyTabs
• 底部导航器再定位到MyMatches对应的TopTab容器页
• 最内层TopTab导航器直接匹配MyMatches2页面，跳过默认的首个子页渲染逻辑

注意事项 #

• screen参数的取值必须和对应导航器中定义的name属性完全匹配，大小写不一致会跳转失败回退到默认页
• 如果需要给目标子页传递自定义参数，可在最内层params中添加对应字段，在目标页面通过route.params即可获取

内容的提问来源于stack exchange，提问作者Arun Chaitanya