react-native - React Navigation - 导航到另一个选项卡并重置堆栈

Question

我正在尝试从一个 StackNavigator 路由到另一个，这两个都在 TabNavigator 中。我目前只需执行以下操作即可到达那里:

this.props.navigation.navigate('Screen3')

但是我也想在访问它时重置该选项卡。以下是我的应用导航器的一般设置方式:

- Main (StackNavigator)
  - LoginScreen
  - MainTabs (TabNavigator)
    - Tab1 (StackNavigator)
      - Screen1
      - Screen2
    - Tab2 (StackNavigator)
      - Screen3
      - Screen4

我如何导航到 Screen3还要重置 StackNavigator Tab2 ?

我也试过这样做，但无济于事:

let resetAction = NavigationActions.reset({
  index: 0,
  key: 'Tab2',
  actions: [
    NavigationActions.navigate({ routeName: 'Screen3' })
  ],
});

this.props.navigation.dispatch(resetAction);

Answer 1

您必须调度两个导航操作，一个用于重置当前选项卡的堆栈，另一个用于导航到下一个屏幕:

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

this.props.navigation.dispatch(resetAction);
this.props.navigation.navigate('Screen3');

这是一个 snack