reactjs - 导航到父堆栈的父堆栈

Question

我有这样的场景，我有一个 StackNavigator 嵌套在 TabNavigator 中，而 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));

但我得到:

没有为关键主屏幕定义路由。必须是以下之一:“ScreenA”、“ScreenB”。

正确的做法是什么？

Answer 1

要从子 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);