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

Question

假设我有这个导航器结构

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 之后，声明：

If the screen is a navigator. See Actions Doc for a full list of supported actions.

但是嘿 link 死了！

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

Answer 1

来自巴兹

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

Answer 2

你可以这样做：

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

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

Answer 3

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

在您的嵌套文件中：

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

在你的parent中：

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

Answer 4

React Navigation v5.x 的默认行为是

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

但是根据他们的文档，

If you need to dispatch actions to the nested child navigators from a parent, you can use 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

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

How to navigate from parent navigator to a screen in child navigator?

reactjs

react-native

react-redux

react-navigation