反应导航 - 导航到另一个选项卡并重置堆栈

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

Answer 2

您可以使用action api的高级navigate与Navigator dependant functions结合使用，而无需使用任何其他操作或导航电话。

这是一个例子

navigateWithReset = (routeName) => {
    const navigateAction = NavigationActions.navigate({
      routeName,
      action: this.props.navigation.popToTop(),
    });
    this.props.navigation.dispatch(navigateAction);
  };

工作小吃链接可以找到here。

Answer 3

首先，您必须导航到选项卡，然后重置为所需的屏幕

this.props.navigation.navigate('Tab2');
let resetAction = StackActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate(
      {
        routeName: 'Screen3',
        params: {},
        key: Math.random() + 'Screen3'
      }
    )
  ]
})
this.props.navigation.dispatch(resetAction);

Answer 4

它基于您的堆栈架构，但是，您应该在resetAction调度之后导航。

在resetAction调度后使用以下代码：

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

Answer 5

以下是我使用NavigationService解决这个问题的方法：

NavigationService.reset({
  index: 0,
  key: null, // required to reset tabs
  actions: [
    NavigationActions.navigate({
      routeName: 'MainTabs',
      action: NavigationActions.navigate({ routeName: 'Tab2' }),
    }),
  ],
});
NavigationService.navigate({
  key: 'Screen3',
  routeName: 'Screen3',
});

注意'key：null'选项，这使它工作