React Native安卓刘海屏适配终极方案：仅需修改 AndroidManifest.xml！

📌 问题背景

在 React Native 开发中，我们经常会遇到安卓设备刘海屏（Notch）适配问题。即使正确使用了 react-native-safe-area-context 和 react-navigation，在一些安卓设备（如小米、华为、OPPO 等）上，头部内容仍然可能被刘海遮挡。

经过反复测试，我发现：**只需在 AndroidManifest.xml 中添加几行配置，即可完美解决！**无需复杂代码改动！

---

✅ 解决方案

✨ 只需一步：修改 AndroidManifest.xml

找到项目路径下的：

android/app/src/main/AndroidManifest.xml

在 <application> 标签中添加以下配置：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.your.app">

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="true"
        android:theme="@style/AppTheme">

        <!-- 启用安卓官方刘海屏支持 -->
        <meta-data
            android:name="android.notch_support"
            android:value="true" />

        <!-- 针对小米MIUI系统的刘海屏适配 -->
        <meta-data
            android:name="notch.config"
            android:value="portrait|landscape" />

        <!-- 针对华为EMUI系统的刘海屏适配 -->
        <meta-data
            android:name="android.max_aspect"
            android:value="2.3" />

        <!-- 其他已有配置继续保留 -->
        
    </application>
</manifest>

---

📚 配置项说明

配置项	说明	适用设备
android.notch_support	启用安卓官方刘海屏支持	所有安卓设备
notch.config	适配小米 MIUI 系统的刘海屏	小米
android.max_aspect	设置最大宽高比，防止内容被刘海遮挡	华为

---

❓ 为什么这个方法有效？

1. android.notch_support
   告诉系统你的应用支持刘海屏，系统会自动为你处理状态栏和内容区域的安全布局。

2. notch.config（小米专属）
   小米系统自定义了刘海屏配置，该配置确保你的 App 在竖屏和横屏下都能正确适配刘海区域。

3. android.max_aspect（华为专属）
   华为 EMUI 系统下，如果不设置此项，App 可能会默认采用缩放模式显示，导致顶部内容被遮挡。

---

⚠️ 注意事项

• ✅ 无需修改 JS 代码：适配全部在原生层完成，对 React Native 的 JavaScript 层无侵入。

• ✅ 无需额外库：不需要安装 react-native-device-info、react-native-page-wrapper 等额外依赖。

• ✅ 已验证兼容性：实测小米、华为、OPPO 等多种设备，均适配良好。

• 🔁 修改后请重新编译 APK：

npx react-native run-android

---

🔚 总结

通过仅修改 AndroidManifest.xml，即可彻底解决 React Native 在安卓刘海屏设备上的适配问题：

• ✅ 不写一行 JS 代码

• ✅ 不引入任何额外库

• ✅ 适配主流国产机型