Question

我有一个bottomTabNavigator，它具有5个屏幕，所有屏幕都链接到自己的堆栈。第五层是“更多”层。当我进入“更多”堆栈中的页面时，我希望能够单击回到其他选项卡之一，然后清除堆栈，以便当我返回“更多”时，它从堆栈顶部开始，而不是最后访问的页面。

我尝试了在Stack Overflow上找到的几种解决方案，但没有一个起作用。一对夫妇似乎来自于不推荐的反应导航版本。

有没有办法做到这一点？

我已经尝试过了...

const MainTabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
      },

    ... other screens ...

    More: {
        screen: MoreStack,
        navigationOptions: {
          tabBarOnPress: ({navigation}) => {

             if  (!navigation.isFocused) {
               navigation.dispatch(resetAction)
             }

            }
        },
      }

...但是它对我不起作用。我的resetAction就这样...

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

我尝试了其他方法来从Stack Overflow的答案中重置操作，但是没有一个起作用。

Answer 1

您可以在popToTop()中使用tabBarOnPress。

但是，这仅在应用于每个选项卡时才能正常工作，因此，如果有一个选项卡您希望保留上次访问的屏幕，则此解决方案将无法使用。

YourRouteName: {
  screen: YourStack,
  navigationOptions: {
    tabBarOnPress: ({ navigation }) => {
      navigation.navigate({
        routeName: navigation.state.routeName,
        action: navigation.popToTop()
      })
    }
  }
}

如何在反应导航中从“更多”页面重置堆栈？

1 个答案: