reactjs - 导航到父堆栈的父级

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

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 标题中的后退按钮工作正常，可以让我回到主页，但需要一种方法来让按钮让我回到主页。
不幸的是，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'。

这样做的正确方法是什么？

最佳答案

要从子 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 的回答也是正确的，这只是我的速记符号。关键是将 null 参数传递给 goBack() 。没有它就行不通。

this.props.navigation.goBack(null);

关于reactjs - 导航到父堆栈的父级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47596977/