导航到父堆栈的父级

Question

我有这种情况，我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标题中的后退按钮工作正常并将我带回Home但需要一种方法来使用一个按钮将我带回HomeScreen。 不幸的是，this.props.navigation.goBack()无效。

我也试过

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

但我明白了：

没有为关键HomeScreen定义路由。必须是以下之一：＆＃39; ScreenA＆＃39;，＆＃39; ScreenB＆＃39;。

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

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);

Answer 2

在新的本机版本中，在这种情况下，我们使用“ StackActions”： StackActions reference

在这种情况下，“ key”参数是解决此问题的关键。通常我们这样管理堆栈：

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

this.props.navigation.dispatch(resetAction);

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

因此，在这种情况下，要重置为root并导航至其中的某个屏幕->在这种情况下，从“ ScreenA”到“ HomeScreen”-您应该输入：

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

注意，在此新版本中，我们不再使用“ NavigationActions”来重置堆栈，而仅使用“ StackActions”来重置堆栈。

Answer 3

使用此

this.props.navigation.goBack(null);

Answer 4

对我来说，使用它可以正常工作：

改变这个：

ExecutionContext

到

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

同样在你的渲染中

this.navigator.dispatch(backAction);