Question

假设我有这个导航结构

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

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

export default Parent;

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

我想举例来说，从Baz导航到Bar。

关注react-community/react-navigation，它声明：

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

但是heyy链接已经死了！

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

Answer 1

来自Baz

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]是选项卡在“数组”或“屏幕”中的位置，并且routeName应该为Bar。

Answer 3

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

在您的嵌套文件中：

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

在您的父母中：

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

Answer 4

React Navigation v5.x的默认行为是

导航动作由当前导航器处理，并且在出现以下情况时会冒泡无法处理

但是根据他们的文档，

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

现在来自父导航器（Baz），可以访问导航道具

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

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

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

4 个答案: