如何从父导航器导航到子导航器中的屏幕？答案

【问题标题】：How to navigate from parent navigator to a screen in child navigator?如何从父导航器导航到子导航器中的屏幕？
【发布时间】：2017-12-12 03:14:40
【问题描述】：

假设我有这个导航器结构

const Child = StackNavigator({
    Foo: { screen: FooScreen },
    Bar: { screen: BarScreen }
});

const Parent = StackNavigator({
    Main: { screen: Child },
    Baz: { screen: BazScreen }
});

export default Parent;

如何从Parent 中的屏幕访问Child 中的屏幕？

例如，我想从 Baz 导航到 Bar。

在react-community/react-navigation 之后，它声明：

如果屏幕是导航器。有关支持的操作的完整列表，请参阅 Actions Doc。

但是，嘿，链接已经死了！

所以How to Fix a 404 Not Found Error 听起来不对，所以我如何从Parent 中的屏幕访问Child 中的屏幕？

【问题讨论】：

为什么投反对票？

标签： reactjs react-native react-redux react-navigation

【解决方案1】：

来自巴兹

this.props.navigation.dispatch(
  NavigationActions.navigate({
    routeName: 'Main',
    action: NavigationActions.navigate({ routeName: 'Bar' }),
  }),
);

【讨论】：

NavigationAction 在 React Navigation 4.x 之后已被弃用并被 CommonActions 取代，但 CommonActions 中没有 action 属性。你能解释一下如何在 React Navigation 5.x 中做同样的事情

【解决方案2】：

你可以这样做：

this.props.navigation.navigate(this.props.navigation.state.routes[1].routeName)

[1]是标签在Array或Screens中的位置，routeName应该是Bar。

【讨论】：

【解决方案3】：

如果您找不到任何解决方案（如我的情况），请执行以下操作：

在您的嵌套文件中：

<StackNavigator ref={(x) => (global.childNavigator = x)} />

在你的父母中：

global.childNavigator.dispatch(
   NavigationActions.navigate({
       routeName: 'Player',
       params: { },
   }),
);

【讨论】：

【解决方案4】：

React Navigation v5.x 的默认行为是

导航操作由当前导航器处理，如果出现则冒泡无法处理

但是根据他们的文档，

如果您需要从父级向嵌套的子导航器分派操作，可以使用 navigation.dispatch

现在从可以访问导航道具的父导航器（Baz）

import { CommonActions } from '@react-navigation/native';

// navigation came from parent props
navigation.dispatch(CommonActions.navigate({ name: 'Bar'}));

以下是参考链接，

Navigation actions are handled by current navigator and bubble up if couldn't be handled

Navigator specific methods are available in the navigators nested inside

Advanced API Reference - Dispatch

【讨论】：