Question

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

Tab Navigator-

选项卡1-| _Stack Navigator

     - Screen 1

     - Screen 2

标签2-| _Stack Navigator

     - Screen 3

     - Screen 4

标签3-| _Stack Navigator

     - 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-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' });
    },
  })}
/>

Answer 2

您可以ovverride 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

Answer 3

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

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

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

3 个答案: