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 navigation中，将路由器属性设置为子路由器并不足以处理所有事情。

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

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

解决方案最终变得简单：

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

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

2 个答案: