React Native 沉浸式標題欄與安卓全面屏適配
阿新 • • 發佈:2019-01-29
一: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" />