React Native中背景及组件被底部导航栏遮挡问题求解

方案1：使用SafeAreaView适配安全区域 #

直接用React Native内置的SafeAreaView作为根容器，它会自动识别设备的系统导航栏/状态栏区域，让内容避开这些区域：

import { SafeAreaView, View } from 'react-native';

function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
      {/* 你的页面内容组件 */}
      <View style={{ flex: 1 }}>
        {/* ... */}
      </View>
    </SafeAreaView>
  );
}

Android注意事项：需要在android/app/src/main/res/values/styles.xml的AppTheme中添加配置，确保安全区域生效：

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

方案2：手动计算可用高度（无第三方库） #

如果SafeAreaView不满足需求，可以手动计算屏幕可用高度，减去底部导航栏的高度：

import { Dimensions, View, Platform } from 'react-native';
import { useEffect, useState } from 'react';

function App() {
  const [availableHeight, setAvailableHeight] = useState(Dimensions.get('window').height);

  useEffect(() => {
    const getBottomNavHeight = () => {
      if (Platform.OS === 'android') {
        // 物理屏幕高度与应用可视高度的差值即为底部导航栏高度
        return Dimensions.get('screen').height - Dimensions.get('window').height;
      }
      return 0;
    };

    setAvailableHeight(Dimensions.get('window').height - getBottomNavHeight());
  }, []);

  return (
    <View style={{ height: availableHeight, backgroundColor: '#fff' }}>
      {/* 你的页面内容 */}
    </View>
  );
}

方案3：Android原生配置适配 #

在Android项目的android/app/src/main/res/layout/activity_main.xml中，给根布局添加android:fitsSystemWindows="true"属性，让React Native根视图自动适配系统窗口，避开导航栏：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <com.facebook.react.ReactRootView
        android:id="@+id/reactRootView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

以上三种方案都能实现组件和背景从底部导航栏顶部开始布局，优先推荐方案1，简洁且兼容性好。

内容的提问来源于stack exchange，提问作者salih öz