react-native - React Navigation 在底部栏上停止后退按钮行为

Question

嘿，我正在使用 React Navigation 中的 createBottomTabNavigator() 并且我有一个自定义的顶栏，我可以用我自己的状态更新它。问题是当我点击一个选项卡时，每次导航都会调用监听器，因此如果您例如转到屏幕 2，则顶部栏会进入错误状态，屏幕 2 的顶部栏会更改。当我按下顶部栏后退按钮时，它会返回到屏幕 1 并将顶部栏更改为屏幕 1 顶部栏。现在，如果我使用底部栏选项卡向后导航而不是使用顶部栏选项卡，它将使顶部栏与屏幕 2 保持一致。 1.

 <Tab.Screen
      listeners={() => {
              switchTab(0);
            }}
            name="Input"
            children={() => (
              <SuchStackContainer
                ref={suchStackRef}
                switchStack={switchStack}
                listings={listings}
                setListings={setListings}
              />
            )}
            options={{
              tabBarLabel: 'Suche',
              tabBarIcon: ({color, size}) => (
                <Ionicons name="car" color={color} size={size} />
              ),
            }}
          />

Answer 1

我假设您正在使用 Bottom Tabs Navigator来自 React 导航。如 docs 中所述您可以覆盖 onPress方法并将其导航到所需的选项卡。这些可以在 screenOptions 下指定Tab.navigator 的 Prop 或 Tab.Screen 的选项 Prop .如果您还需要我的帮助，请告诉我

function MyTabBar({ navigation }) {
  return (
    <Button
      title="Go somewhere"
      onPress={() => {
        // Navigate using the `navigation` prop that you received
        navigation.navigate('SomeScreen');
      }}
    />
  );
}