React Native中使用<Tab.Navigator>时如何在其他页面隐藏底部Tab菜单

方案1：调整导航嵌套结构（最推荐） #

出现隐藏不生效的核心原因通常是导航层级结构错误，不要将需要隐藏Tab栏的页面放在Tab.Navigator的路由范围内，正确结构为将Tab.Navigator整体作为Stack.Navigator的一个子路由，其他无需展示Tab栏的页面和Tab导航路由平级：

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// 内部Tab导航组件
function TabNavigator() {
  return (
    <Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Mine" component={MineScreen} />
      {/* 不要在这里放需要隐藏Tab的页面 */}
    </Tab.Navigator>
  )
}

// 根导航组件
function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="TabRoot" component={TabNavigator} options={{ headerShown: false }} />
      {/* 需要隐藏Tab的页面放在根栈里，和Tab导航平级 */}
      <Stack.Screen name="Detail" component={DetailScreen} />
      <Stack.Screen name="Setting" component={SettingScreen} />
    </Stack.Navigator>
  )
}

方案2：自定义TabBar增加路由判断 #

如果业务需要必须将页面放在Tab.Navigator内部，可以在你自定义的TabBar组件中增加当前路由的判断逻辑，匹配到需要隐藏Tab的路由时直接返回null即可：

// 自定义TabBar组件
function TabBar(props) {
  // 获取当前激活的路由名称
  const getCurrentRoute = (route) => {
    if (route.state) {
      return getCurrentRoute(route.state.routes[route.state.index]);
    }
    return route.name;
  }
  const currentRouteName = getCurrentRoute(props.state);

  // 匹配需要隐藏Tab的路由名称，匹配到就不渲染Tab栏
  if (['Detail', 'Setting'].includes(currentRouteName)) {
    return null;
  }

  // 原有TabBar的渲染逻辑
  return (
    // 你原来的TabBar代码
  )
}

注：以上方案适配React Navigation 6.x版本，如果你使用的是5.x版本，路由获取逻辑基本一致无需调整。

内容的提问来源于stack exchange，提问作者Kaushal Kumar