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

Question

我阅读了有关导航嵌套导航器的文档 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({})

那我该怎么做呢？

Answer 1

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

见explicitly rendering more than one navigator。

Answer 2

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

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

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

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

最终的解决方案很简单：

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

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

React native: How to navigate nested navigator (wrapped by a component)

navigation

react-native

react-navigation