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

Question

我通读了 the documentation 这个具体问题，但我还是不太明白。这是我的场景：

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

如果我的理解是正确的，我所附的 link 只允许您从屏幕上删除 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)
        })
    >

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

Hiding tab bar in specific screens React-Native

react-native

react-navigation