如何在 react native bottomTabNavigator 中重置每个选项卡内的选项卡更改堆栈？

Question

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

选项卡导航器-

选项卡 1 - |_堆栈导航器

         - Screen 1
               
         - Screen 2

选项卡 2 - |_堆栈导航器

         - Screen 3
               
         - Screen 4

选项卡 3 - |_堆栈导航器

         - Screen 5
         - Screen 6

目前的情况是， .假设我在选项卡 1 - 我从屏幕 1 导航到屏幕 2 .然后我点击 Tab 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-navigation/stack": "^5.0.5", “反应”：“16.9.0”， “本机反应”：“0.61.5”， “react-native-gesture-handler”：“^1.6.0”， “react-native-gifted-chat”：“^0.13.0”， “react-native-reanimated”：“^1.7.0”， "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.0.0-beta.7", },

Answer 1

您可以在选项卡屏幕上添加一个侦听器并在其中进行自定义导航

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

Answer 2

导航提供了调度方法。您可以在索引为 0 的当前导航对象上调度 StackActions.reset() 操作，这应该会硬重置堆栈。

如何在 react native bottomTabNavigator 中重置每个选项卡内的选项卡更改堆栈？

How to Reset the stacks on tab change inside each tab in react native bottomTabNavigator?

react-native

react-native-android

react-navigation

react-navigation-bottom-tab

react-navigation-v5