Question

导航至父堆栈的父级

2017-12-01

3978

reactjs react-native react-navigation

我有这样的场景，其中 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));

但我得到：

没有为键 HomeScreen 定义路由。必须是以下之一：“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);

Answer 2

在新的 React Native 版本中，我们针对这种情况使用“StackActions”： StackActions 参考

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

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

this.props.navigation.dispatch(resetAction);

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

因此在这种情况下，要重置回根目录并导航到其中的某个屏幕 ->在您的情况下从“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);

Jigar

2017-12-02