如何在反应导航中在不同的嵌套堆栈之间导航

Question

目标

使用反应导航，从导航器中的屏幕导航到不同导航器中的屏幕。

更多详情

如果我有以下导航器结构：

• 父导航器
  • 嵌套导航器 1
    • 屏幕A
    • 屏幕 B
  • 嵌套导航器 2
    • 屏幕 C
    • 屏幕 D

如何从嵌套导航器 2 下的屏幕 D 转到嵌套导航器 1 下的屏幕 A？现在如果我尝试 navigation.navigate 从屏幕 D 屏幕 A 会出现一个错误，说它不知道屏幕 A，只知道屏幕 C 和 D。

我知道这个网站以及 GitHub （ https://github.com/react-navigation/react-navigation/issues/983，https://github.com/react- navigation/react-navigation/issues/335#issuecomment-280686611 ）但是对于如此基本的东西，缺乏明确的答案，并且滚动浏览数百条 GitHub 评论以寻找解决方案并不是很好。

也许这个问题可以为遇到这个非常常见问题的每个人编写如何做到这一点。

原文由 izikandrw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新：对于 React Navigation v5，请参阅 @mahi-man 的回答。

---

您可以使用 navigate 的第三个参数 来指定子动作。

例如，如果您想从嵌套导航器 2 下的屏幕 D 转到嵌套导航器 1 下的屏幕 A：

 this.props.navigation.navigate(
    'NestedNavigator1',
    {},
    NavigationActions.navigate({
        routeName: 'screenB'
    })
)

还要检查： https ://reactnavigation.org/docs/nesting-navigators/

原文由 Stackia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 React Navigation 5 中，通过将屏幕作为第二个参数传递，这变得更加容易：

 navigation.navigate('Nested Navigator 2', { screen: 'screen D' });

如果您有深度嵌套的屏幕，您还可以包含其他级别：

 navigation.navigate('Nested Navigator 2', {
    screen: 'Nested Navigator 3', params: {
        screen: 'screen E'
    }
});

原文由 mahi-man 发布，翻译遵循 CC BY-SA 4.0 许可协议