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

您可以在标签页上添加一个侦听器，并在其中进行自定义导航

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

Answer 2

导航提供了一种调度方法。您可以在当前导航对象上为索引分派0的StackActions.reset()操作，这将使堆栈硬复位。

如何在本机bottomTabNavigator中的每个选项卡内的选项卡更改上重置堆栈？

2 个答案: