我的选项卡中有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“,},
您可以使用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