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

Question

我有一个bottomTabNavigator，它有5 个屏幕，都链接到它们自己的堆栈。第 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

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

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

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