React native：如何导航嵌套导航器（由组件包装）答案

【问题标题】：React native: How to navigate nested navigator (wrapped by a component)React native：如何导航嵌套导航器（由组件包装）
【发布时间】：2017-08-19 12:52:38
【问题描述】：

我阅读了有关导航嵌套导航器https://reactnavigation.org/docs/en/navigation-actions.html#setparams的文档

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)

但是，我的嵌套导航器SubProfileRoute 被一个组件包裹

module.exports = class _ extends React.Component { ... }

不是

module.exports = StackNavigator({})

那我该怎么做呢？

【问题讨论】：

嘿，先生们，我没有看到这里的任何链接有效，我也遇到了同样的问题。我不确定如何使常规组件具有路由器（如果您希望它成为导航树的一部分，这似乎是必要的）。你知道在最新的反应导航中是否仍然可以解决这个问题以及如何做到这一点？

标签： react-native navigation react-navigation

【解决方案1】：

您需要将子导航器的路由器分配给包装它的组件 - 这样外部导航器会将导航属性传递给子导航器。

见explicitly rendering more than one navigator。

【讨论】：

嘿，我认为您不会收到有关上述评论的通知，所以我们也尝试在此处 ping 您。我试图不再提出同样的问题。

【解决方案2】：

所以，我设法解决了这个问题。问题是此处共享的链接不起作用，尽管 Kraylog 的回答提供了一个开始研究的好地方。

我发现，为了让嵌套路由器工作，导航确实会在它呈现的组件中寻找子路由器。但是，仅将 router 属性设置为子路由器的属性是不够的，以使一切都可以使用，在我的示例中是 redux 导航。

您还需要手动将导航道具传递给子导航器。

有点帮助的文档是custom navigator guide。

解决方案很简单：

class MyNavigator extends React.Component {
  static router = NestedNavigator.router;
  render() {
    return <NestedNavigator navigation={this.props.navigation} />;
  }
}

【讨论】：

这是正确的，并且在 react-navigation 文档中（由您真正添加）。看来在网站大修的时候，这部分被舍弃了，相当适得其反。我建议为文档重新提交 PR。