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" />

         <!-- 针对OPPO系统的刘海屏适配 -->
        <meta-data 
            android:name="com.oppo.feature.screen.heteromorphism" 
            android:value="true" />

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

在华为鸿蒙系统，需要在MainActivity.kt(MainActivity.java)里面添加遗下代码

package com.fujfu.fyh

import android.os.Build
import android.os.Bundle
import android.view.View
import android.view.WindowManager
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
// import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import org.devio.rn.splashscreen.SplashScreen

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    
    // 设置状态栏透明 解决刘海屏问题 鸿蒙系统
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
      window.decorView.systemUiVisibility = 
        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
      window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
      window.statusBarColor = android.graphics.Color.TRANSPARENT
    }
    
    SplashScreen.show(this)
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String {
    return "fyhMobile"
  }

  /**
   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
   * (aka React 18) with two boolean flags.
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate =
    DefaultReactActivityDelegate(
      this,
      mainComponentName,
      fabricEnabled // fabricEnabled
    )
}

📚 配置项说明

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