react-native - 在特定屏幕中隐藏标签栏 React-Native

Question

我通读了关于这个特定问题的文档，但我仍然不太明白。这是我的场景：

我有一个BottomTabNavigator包含三个选项卡的选项卡：主页、相机和个人资料。使用我当前的设置，我可以在这些屏幕之间切换，并且 TabBar 会显示在每个屏幕上。但是我想要的是在 TabBar 上具有相同的三个选项卡项，但 TabBar 不会显示在相机屏幕中。

如果我的理解是正确的，我所附的链接仅允许您从屏幕上删除 TabBar，如果您从 TabBar 中删除该选项卡（例如，如果我从 TabBar 中删除相机，我只能实现我想要的，但我想保留TabBar 中的相机选项卡）。

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Camera"
          component={CameraScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我试过了：

options={{ tabBarVisable=false }}

但它也没有用。

Answer 1

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';    


const getTabBarVisibility = (route) => {    

    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    const disabledScreens = ['CameraScreen'];
    
    if (disabledScreens.includes(routeName)) {
        return false;
    }
    
    return true;
};    

<Tab.Navigator 
        screenOptions={({route}) => ({            
            tabBarVisible: getTabBarVisibility(route)
        })
    >