1. 程式人生 > >React Native 沉浸式標題欄與安卓全面屏適配

React Native 沉浸式標題欄與安卓全面屏適配

一:RN標題欄的適配很簡單,官方提供了一個原生元件,可以設定標題欄背景之類的

<StatusBar
backgroundColor={'#e34451'}
/>

二:全面屏適配,

  參考文件:https://android-developers.googleblog.com/2017/03/update-your-app-to-take-advantage-of.html

  全面屏的問題主要是因為螢幕比例不一樣,導致顯示上下黑邊。解決方案是改變螢幕最大適應比例

步驟:

    1.確保安卓SDK為24以上,RN預設使用23。RN安卓sdk在 /android/app/build.gradle 檔案裡修改,修改值如下:

compileSdkVersion 24
buildToolsVersion "24.0.1"

    2.安卓SDK24,可在Android Studio 裡安卓,具體安裝方式參考官網的SDK23安裝教程

    3.修改螢幕最大適應比例配置 android\app\src\main\AndroidManifest.xml 檔案的 application裡新增以下配置(注意:需要android:resizeableActivity為true時才能生效,我這裡預設為true, 就不做修改了),最好重啟電腦

  <!--安卓全面屏適配-->
<meta-data android:name
="android.max_aspect" android:value="2.1" />