如何为React Native自定义导航栏添加外边距解决遮挡屏幕问题

当你通过tabBar参数传入自定义的底部导航栏组件时，React Navigation 默认的 TabBar 相关配置（包括tabBarOptions里的tabStyle）仅针对自带的默认TabBar组件生效，自定义TabBar场景下这些配置会自动失效，所以你写在tabStyle里的样式不会生效。

你不需要为每个页面单独加边距，可通过以下两种方式全局处理：

• 方式1：全局配置Tab页面内容内边距
  直接在Tab.Navigator的screenOptions中配置contentStyle，给所有Tab页面统一添加底部内边距，值设置为你自定义导航栏的实际高度即可，所有页面自动适配不需要单独修改：

<Tab.Navigator
      initialRouteName="Home"
      animationEnabled={false}
      tabBar={(props) => <CustomBottomNavbar {...props} avatar={avatar} />}
      screenOptions={{
        tabBarActiveTintColor: Colors.orange,
        tabBarInactiveTintColor: Colors.gray,
        tabBarShowLabel: false,
        tabBarShowIcon: true,
        tabBarHideOnKeyboard: true,
        // 全局内容底部内边距，值替换为你自定义导航栏的实际高度
        contentStyle: {
          paddingBottom: hp(8)
        }
      }}>
      {tabScreens}
</Tab.Navigator>

• 方式2：直接在自定义导航栏组件中调整样式
  你需要的导航栏样式直接写在CustomBottomNavbar组件的最外层容器样式中即可，比如你之前需要的marginTop可直接加在这里，也可以同步适配刘海屏底部安全区：

// CustomBottomNavbar 组件内部代码示例
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomBottomNavbar = (props) => {
  // 适配刘海屏底部安全区，可选配置
  const insets = useSafeAreaInsets();
  return (
    <View style={{
      marginTop: hp(1.5),
      height: hp(8) + insets.bottom,
      paddingBottom: insets.bottom,
      backgroundColor: '#fff',
      // 其他你需要的导航栏样式
    }}>
      {/* 导航栏内部图标、按钮等内容 */}
    </View>
  )
}

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