React Native应用如何实现MIUI导航栏透明 解决布局重叠问题

该问题核心是MIUI 12开启全面屏手势后，系统虚拟导航栏为沉浸式绘制，应用未正确获取系统安全边距导致布局重叠，可按以下步骤适配：

1. 安装安全区依赖 #

@react-navigation/native 依赖 react-native-safe-area-context 实现系统边距适配，先执行安装：

npm install react-native-safe-area-context
# iOS端需额外执行
cd ios && pod install

2. 全局安全区容器配置 #

在应用根节点用SafeAreaProvider包裹整个导航容器，作为安全边距计算的基础：

import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        {/* 原有导航栈配置 */}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

3. 导航栏适配 #

全局统一适配（推荐） #

创建栈导航时统一配置屏幕参数，自动适配系统状态栏和底部导航栏边距：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Stack = createNativeStackNavigator();

function RootNavigation() {
  const insets = useSafeAreaInsets();
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          // 适配顶部状态栏高度，避免和系统状态栏重叠
          paddingTop: insets.top
        },
        // 若使用自定义底部tab导航，添加以下配置
        tabBarStyle: {
          paddingBottom: insets.bottom
        },
        // 开启系统栏透明适配
        statusBarTranslucent: true,
        navigationBarTranslucent: true
      }}
    >
      {/* 原有页面配置 */}
    </Stack.Navigator>
  )
}

单页面自定义适配 #

如果部分自定义页面不需要全局配置，可单独用SafeAreaView包裹页面内容：

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

function CustomPage() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* 页面原有内容 */}
    </SafeAreaView>
  );
}

4. 安卓原生配置补充 #

如果以上配置后仍有重叠，修改安卓原生清单文件：
打开android/app/src/main/AndroidManifest.xml，找到主Activity标签，添加如下属性：

<activity
  ...
  android:fitsSystemWindows="true"
  android:windowDrawsSystemBarBackgrounds="true"
>

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