Question

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

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

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

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

1 个答案: