react-navigation modal页面如何隐藏底部tab栏（Android端不生效）

原因说明 #

你遇到的差异是iOS和安卓端对fullScreenModal的默认层级处理不同：iOS的全屏模态默认会覆盖整个应用视图（包括底部Tab栏），但安卓端嵌套在Tab子栈内的模态页只会在当前子栈区域渲染，不会自动覆盖底部Tab。

方案一：动态控制Tab栏显隐（改动最小） #

修改你的AppStack.tsx代码，通过路由判断动态设置tabBarVisible属性：

// AppStack.tsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 新增导入
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const Tab = createBottomTabNavigator()

// 新增判断Tab栏是否显示的函数
const getTabBarVisibility = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'homeStack';
  // 所有需要隐藏Tab栏的路由名都加在这
  if (routeName === 'addStuff') {
    return false;
  }
  return true;
}

const AppStack = () => {
  return (
    <Tab.Navigator initialRouteName="homeStack" >
      <Tab.Screen 
        name="homeStack" 
        component={HomeStack}
        // 新增options配置
        options={({ route }) => ({
          tabBarVisible: getTabBarVisibility(route)
        })}
      />
      ...
    </Tab.Navigator>
  )
}

如果你的StuffStack内部还有其他子页面需要隐藏Tab，把对应路由名也添加到判断条件里即可。

方案二：调整导航结构（更推荐，跨端表现统一） #

把全局模态页从Tab子栈中抽离，放到根导航栈中，模态页会直接覆盖整个Tab导航，天然不会显示底部Tab：

1. 调整根导航结构，改成根Stack导航包裹Tab导航和全局模态页：

// AppStack.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator()
const RootStack = createNativeStackNavigator()

// 原来的Tab导航抽成单独组件
const TabNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="homeStack" >
      <Tab.Screen name="homeStack" component={HomeStack} />
      ...
    </Tab.Navigator>
  )
}

const AppStack = () => {
  return (
    <RootStack.Navigator>
      <RootStack.Screen 
        name="tabNavigator" 
        component={TabNavigator}
        options={{ headerShown: false }}
      />
      {/* 把modal页移到根栈 */}
      <RootStack.Screen
        name="addStuff"
        component={StuffStack}
        options={{
          presentation: 'fullScreenModal',
          headerShown: false
        }}
      />
    </RootStack.Navigator>
  )
}

2. 删除原来HomeStack.tsx里的addStuff页面配置，跳转的时候直接导航到根栈的addStuff即可：

// HomeScreen.tsx
// 如果要跳转根栈的路由，用navigation.getParent()获取根导航
navigation.getParent().navigate('addStuff')

这种方案的跨端表现完全一致，后续新增其他全局模态页也不需要修改Tab栏的判断逻辑，维护成本更低。

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