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

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

请参阅显式呈现多个导航器。

Answer 2

所以，我设法解决了这个问题。问题是这里分享的链接不起作用，即使Kraylog的答案提供了一个开始研究的好地方。

我发现，为了使嵌套路由器正常工作，导航确实会在它呈现的组件中查找子路由器。但是，将路由器属性设置为子路由器的属性是不够的，在我的示例中，可以使用所有内容，例如 redux 导航。

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

对此自定义导航器指南有所帮助的文档。

解决方案最终很简单：

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