导航到 parent 个堆栈中的 parent

Question

我有这样的场景，我有一个 StackNavigator 嵌套在另一个 StackNavigator 中嵌套的 TabNavigator。

const TabOneStack = StackNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB }
});

const MainTabs = TabNavigator({
  TabOne: { screen: TabOneStack },
  TabTwo: { screen: TabTwoStack }
});

const Root = StackNavigator({
  HomeScreen: { screen: HomeScreen },
  MainTabs: { screen: MainTabs }
});

一切正常，但我无法弄清楚如何从 ScreenA 导航回根 StackNavigator 中的主屏幕。在 HomeScreen 之后，用户直接导航到 ScreenA。 ScreenA 中 header 中的后退按钮工作正常，可以让我返回主屏幕，但需要一种方法来让我返回主屏幕的按钮。 this.props.navigation.goBack() 不幸的是没有用。

我也试过

const backAction = NavigationActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({ routeName: 'HomeScreen'})
  ]
});    
this.props.navigation.dispatch(backAction));

但我得到：

没有为关键的 HomeScreen 定义路由。必须是以下之一：'ScreenA'、'ScreenB'.

正确的做法是什么？

Answer 1

对我来说，使用这个应该可以正常工作：

改变这个：

this.props.navigation.dispatch(backAction));

至

this.navigator.dispatch(backAction);

也在你的渲染中

  render() {
    return (
      <Root
        ref={(nav) => {
          this.navigator = nav;
        }}
      />
    );
  }

Answer 2

使用这个

this.props.navigation.goBack(null);

Answer 3

要从子 StackNavigator 遍历回到父 StackNavigator，执行：

class ScreenA extends Component {
    render() {
        return (<Button onPress={() => {
            this.props.navigation.dispatch({type: 'Navigation/BACK'});
        }} title='ScreenA. back to Home' />);
    }
}

this.props.navigation.dispatch() 和 'Navigation/BACK' 与最上面的后退按钮完全相同。
它与 goBack() 的区别在于应用父子堆栈遍历，而 goBack() 则没有。

结果：

请注意@Jigar 的回答也是正确的，它只是我的一个 shorthand 符号。关键是将 null 参数传递给 goBack()。没有它就不行。

this.props.navigation.goBack(null);

Answer 4

在新的 React Native 版本中，我们使用 'StackActions' 来处理这种情况： StackActions reference

本例中的'key'参数是解决这个问题的关键。通常我们这样管理栈：

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'ScreenA' })],
});

this.props.navigation.dispatch(resetAction);

但 StackActions 对象有另一个选项，它的：'key' - 它是一个可选字符串或 null - 如果设置，具有给定键的导航器将重置。如果 null，root 导航器将重置。

所以在这种情况下，要重置回 root 并导航到其中的某个屏幕 -> 在你的情况下，从 'ScreenA' 到 'HomeScreen' - 你应该写：

this.props.navigation.dispatch(
        StackActions.reset({
          index: 0,
          key:null,
          actions: [
            NavigationActions.navigate({
              routeName: 'HomeScreen'
            })
          ]
        })
      );

注意，在这个新版本中我们不再使用'NavigationActions'来重置堆栈，只使用'StackActions'。

Answer 5

在 v6 中你可以使用这样的东西：

navigation.getParent()?.navigate('Home')

导航到 parent 个堆栈中的 parent

Navigate to parent of parent stack

reactjs

react-native

react-navigation

结果：