React Native能否实现适配底部导航栏的100%屏幕高度页面

完全可以实现你描述的效果，核心是开启边缘到边缘（Edge-to-Edge）渲染，配合安全区 inset 值做动态适配即可，不需要做复杂的原生定制。

具体实现步骤 #

• 安卓端原生配置
  打开项目路径下的android/app/src/main/res/values/styles.xml，添加以下配置，允许页面渲染到系统状态栏、底部导航栏区域：

  <!-- 透明导航栏、状态栏 -->
  <item name="android:navigationBarColor">@android:color/transparent</item>
  <item name="android:statusBarColor">@android:color/transparent</item>
  <!-- 允许渲染到刘海、挖孔区域 -->
  <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  

  iOS端不需要额外修改原生配置，RN默认支持渲染到安全区域外。

• 安装安全区处理依赖
  执行命令安装官方维护的安全区处理库，不要自己硬编码机型高度判断：

  npm install react-native-safe-area-context
  # 或者用yarn
  yarn add react-native-safe-area-context
  

  安装完成后记得在项目入口用SafeAreaProvider包裹根组件。

• 页面布局逻辑
  布局分三层即可实现你要的效果：

  1. 最外层容器设置flex:1撑满整个物理屏幕，覆盖范围直达屏幕最底部，包含系统导航栏所在区域
  2. 业务内容区用SafeAreaView包裹，自动避开顶部状态栏、左右圆角区域，底部不做强制安全区偏移
  3. 自定义底部导航栏组件，通过useSafeAreaInsets()钩子拿到当前设备的底部安全区高度，给组件加对应数值的paddingBottom，就能刚好贴合在系统导航栏/手势条上方，不会出现遮挡或者多余留白

  参考代码如下：

  import { View, Text, StyleSheet } from 'react-native';
  import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
  
  export default function TargetPage() {
    const insets = useSafeAreaInsets();
    return (
      <View style={styles.pageRoot}>
        {/* 页面主体内容 */}
        <SafeAreaView style={styles.content} edges={['top', 'left', 'right']}>
          <Text>页面业务内容</Text>
        </SafeAreaView>
        {/* 自定义底部导航栏 */}
        <View style={[styles.tabBar, { paddingBottom: insets.bottom }]}>
          <Text>首页</Text>
          <Text>我的</Text>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    pageRoot: {
      flex: 1,
      backgroundColor: '#ffffff'
    },
    content: {
      flex: 1
    },
    tabBar: {
      height: 56,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-around',
      borderTopWidth: 0.5,
      borderTopColor: '#eee'
    }
  });
  

• 适配验证
  这套方案会自动适配所有机型：带虚拟按键的老安卓设备、全面屏手势导航的安卓机型、各代iPhone，insets.bottom会动态返回当前设备实际的底部安全区高度，最终呈现效果和原型完全一致。

内容的提问来源于stack exchange，提问作者Alexandre Brandão