react-native - 如何重置底部选项卡导航器内选项卡更改的堆栈？

Question

Snack

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

标签导航器-

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

     - Screen 1

     - Screen 2

选项卡 2 - |_Stack Navigator

     - Screen 3

     - Screen 4

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

     - Screen 5
     - Screen 6

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

每个选项卡上都发生了类似的事情。

我想在每次点击标签时重置标签。

请帮忙。

我正在使用-

"dependencies": { "@react-native-community/cli": "^4.1.0", "@react-native-community/masked-view": "^0.1.6", "@react-导航/底部标签": "^5.0.5", "@react-navigation/native": "^5.0.5", "@react-navigation/stack": "^5.0.5", " react ": “16.9.0”，“react-native”:“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

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

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