React Navigation设置navigationBarColor致tabBar被Android导航栏遮挡

问题原因 #

设置navigationBarColor后，React Navigation会启用Android系统导航栏的沉浸式模式，页面内容默认不会自动避开系统导航栏区域，而自定义tabBar组件如果没做安全区域适配，就会被遮挡。

解决方案 #

1. 给自定义tabBar添加安全区域底部内边距（推荐） #

用react-native-safe-area-context库获取系统安全区域的底部间距，给tabBar加上对应内边距：

import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomTabBar = (props) => {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ 
      paddingBottom: insets.bottom, 
      // 保留你原有的tabBar样式，比如背景色
      backgroundColor: '#fff' 
    }}>
      {/* 你的tabBar内容，如TabBarItem等 */}
    </View>
  );
};

如果没安装该库，先执行npm install react-native-safe-area-context，再按官方文档完成基础配置。

2. 禁用系统导航栏半透明 #

在Stack Screen的options里添加navigationBarTranslucent: false，让系统导航栏占据独立空间，页面内容会自动避开：

<Stack.Screen
  options={{ 
    headerShown: false, 
    navigationBarColor: '#121212',
    navigationBarTranslucent: false // 关键配置
  }}
  name="MainScreen"
  component={MainScreen}
/>

这个方法适合不需要半透明系统导航栏的场景，配置简单直接。

3. 手动给Tab导航器加底部间距 #

通过Dimensions计算系统导航栏高度，给Top Tabs Navigator设置底部内边距：

import { Dimensions } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();
// 计算系统导航栏高度
const screenHeight = Dimensions.get('window').height;
const windowHeight = Dimensions.get('screen').height;
const navBarHeight = screenHeight - windowHeight;

const MainScreen = () => {
  return (
    <Tab.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      style={{ paddingBottom: navBarHeight }} // 添加底部间距
      // 你的其他Tab配置，比如tabBarPosition: 'bottom'
    >
      <Tab.Screen name="Tab1" component={Tab1Screen} />
      <Tab.Screen name="Tab2" component={Tab2Screen} />
    </Tab.Navigator>
  );
};

这是兜底方案，适合无法使用安全区域库的场景，但适配精度略逊于第一种方法。

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