如何重置bottomTabNavigator中选项卡更改时的堆栈？答案

【问题标题】：How to Reset the stacks on tab change inside bottomTabNavigayor?如何重置bottomTabNavigator中选项卡更改时的堆栈？
【发布时间】：2020-04-07 05:03:18
【问题描述】：

Snack

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

标签导航器-

选项卡 1 - |_Stack 导航器

     - Screen 1

     - Screen 2

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

     - Screen 3

     - Screen 4

选项卡 3 - |_Stack 导航器

     - Screen 5
     - Screen 6

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

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

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

请帮忙。

我正在使用 -

“依赖”：{“@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", },

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以覆盖 tabBarOnPress 以控制标签点击并手动重置堆栈或使用其他技巧。

一个可能的解决方案应该是

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 更新此代码。（下面的解决方案也是如此）

参考更多解决方案here

【讨论】：

【解决方案3】：

如果你使用的是导航版本 4 或更低版本，那么我有一个非常简单的方法来做到这一点。

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

【讨论】：