📌 問題背景
在 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"><applicationandroid: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-dataandroid:name="android.notch_support"android:value="true" /><!-- 針對小米MIUI系統的劉海屏適配 --><meta-dataandroid:name="notch.config"android:value="portrait|landscape" /><!-- 針對華為EMUI系統的劉海屏適配 --><meta-dataandroid:name="android.max_aspect"android:value="2.3" /><!-- 其他已有配置繼續保留 --></application>
</manifest>
📚 配置項說明
| 配置項 | 說明 | 適用設備 |
|---|---|---|
android.notch_support | 啟用安卓官方劉海屏支持 | 所有安卓設備 |
notch.config | 適配小米 MIUI 系統的劉海屏 | 小米 |
android.max_aspect | 設置最大寬高比，防止內容被劉海遮擋 | 華為 |
? 為什么這個方法有效？
android.notch_support
告訴系統你的應用支持劉海屏，系統會自動為你處理狀態欄和內容區域的安全布局。notch.config（小米專屬）
小米系統自定義了劉海屏配置，該配置確保你的 App 在豎屏和橫屏下都能正確適配劉海區域。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 代碼
? 不引入任何額外庫
? 適配主流國產機型
)
