React native 如何在bottomTabNavigayor中重置选项卡更改上的堆栈？

我的选项卡中有bottomTabNavigator，每个选项卡中都有堆栈。每当单击另一个选项卡时，我都要重置堆栈

选项卡导航器-

表1-| | U堆栈导航器

     - Screen 1

     - Screen 2

     - Screen 3

     - Screen 4

     - Screen 5
     - Screen 6

表2-| | U堆栈导航器

     - Screen 1

     - Screen 2

     - Screen 3

     - Screen 4

     - Screen 5
     - Screen 6

表3-| | U堆栈导航器

     - Screen 1

     - Screen 2

     - Screen 3

     - Screen 4

     - Screen 5
     - Screen 6

目前的情况是。假设我在选项卡1上-我从屏幕1导航到屏幕2。然后单击选项卡2。现在，如果我再次单击选项卡1，将显示屏幕2而不是屏幕1

每个标签上都发生了类似的事情

我想在每次单击选项卡时重置选项卡

请帮忙

我正在使用-

---

“依赖项”：“{@react native community/cli”：“^4.1.0”，“@react native community/masked view”：“^0.1.6”，“@react navigation/bottom tabs”：“^5.0.5”，“@react navigation/native”：“^5.0.5”，“react”：“16.9.0”，“react native”：“0.61.5”，“react native手势处理程序”：“^1.6.0”，“react native gifted chat”：“^0.13.0”、“react-native reanimated”：“^1.7.0”、“react-native安全区域上下文”：“^0.7.3”、“react-native screens”：“^2.0.0-beta.7”，}，

您可以使用OVERRIDE TABBRONPRESS来控制选项卡，单击并手动重置堆栈，或使用其他一些技巧

一个可能的解决办法应该是

navigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ scene, jumpToIndex }) => {
    const { route, focused, index } = scene;
    if (focused) {
      if (route.index > 0) {
        const { routeName, key } = route.routes[1]
        navigation.dispatch(NavigationActions.back({ key }))
      }
    } else {
      jumpToIndex(index);
    }
  },
});

您可能需要为v5更新此代码。（下面的解决方案也是如此）

---

请参阅更多解决方案

更新最新版本的react navigation及其依赖项，并使用此解决方案，这对我很有用

<AppTabs.Screen
  name="TabScreen1"
  listeners={({ navigation }) => ({
    tabPress: () => {
      navigation.navigate('Main1', { screen: 'Main2' });
    },
  })}
/>

({
tabPress:（）=>{
navigation.navigate（'Main1'，{screen'Main2'}）；
},
})}
/>

如果您使用的是导航版本4或更低，那么我有一个非常简单的方法

 tabBarOnPress:({ navigation }) => {
      navigation.navigate(HomeStack,{screen:navigation.state.routes[0].routeName});
       navigation.popToTop();
    },