react-native android狀態欄的實現

來源：懂視網責編：小采時間：2020-11-27 22:12:49

react-native android狀態欄的實現

react-native android狀態欄的實現:react-native 開發App的時候難免會遇到狀態欄的，背景顏色和字體顏色與App內容頁面，色調適配，間言之就是將狀態欄顏色與App顏色一致，使用戶界面更加整體。 1.android設備系統元素導航欄：就是設備頂部的網絡、時間、電量等信息欄 ActionBar:

推薦度：

點擊下載本文 文檔為doc格式

導讀react-native android狀態欄的實現:react-native 開發App的時候難免會遇到狀態欄的，背景顏色和字體顏色與App內容頁面，色調適配，間言之就是將狀態欄顏色與App顏色一致，使用戶界面更加整體。 1.android設備系統元素導航欄：就是設備頂部的網絡、時間、電量等信息欄 ActionBar:

react-native 開發App的時候難免會遇到狀態欄的，背景顏色和字體顏色與App內容頁面，色調適配，間言之就是將狀態欄顏色與App顏色一致，使用戶界面更加整體。

1.android設備系統元素

導航欄：就是設備頂部的網絡、時間、電量等信息欄
ActionBar: 返回按鈕以及系統默認的header區域，RN開發中一般不會用到，RN中在navigation中進行定制
導航欄: 設備下方的物理返回、回桌面、選擇應用程序等系統導航欄

2.狀態欄的呈現形式

默認展示，一直顯示手機系統的狀態欄
透明狀態欄，狀態欄背景顏色透明，狀態欄顏色與App顏色一致，用戶界面更加整體。
隱藏狀態欄(沉浸式)，狀態欄完全隱藏，類似于全屏游戲、視頻播放器的效果

2.1 默認展示

系統默認狀態欄樣式，無法改變

2.2 透明狀態欄

透明狀態欄很常見，大多數的App都是使用這種模式，使得狀態欄顏色與App顏色一致，使用戶界面更加整體，整個應用看起來更加美觀。

實現透明的狀態欄的方式很多：

一、使用App的主題進行配置,在app/main/res/values/styles.xml中設置主題

<resources>

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 <item name="android:windowTranslucentStatus">true</item> // 設置狀態欄不占據空間
 // <item name="android:windowLightStatusBar">true</item> // 設置狀態欄字體顏色
 </style>

</resources>

這種方式支持api19, 即Android4.4及以上，會在App啟動的時候就生效, 在App啟動時有權限確認、系統彈窗等也不受影響，在彈出modal之類的深色蒙層時狀態欄字體會變成成淺色

只設置 <item name="android:windowTranslucentStatus">true</item> 這種方式設置的透明狀態欄，狀態欄字體默認白色，無法再動態通過StatusBar改變狀態欄的背景顏色,在做需要改變狀態欄背景顏色的時候就比較尷尬了

再加一個 <item name="android:windowLightStatusBar">true</item> 這樣設置狀態欄字體顏色之后，在深色modal彈出的時候字體不會動態改變成白色，但可以通過StatusBar設置barStyle來改變，實際上也不是很方便

二、android原生設置,在MainActivity的onCreate中進行設置

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 // 設置透明狀態欄
 if (Build.VERSION.SDK_INT >= 21) {
 View decorView = getWindow().getDecorView();
 int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
 decorView.setSystemUiVisibility(option);
 getWindow().setStatusBarColor(Color.TRANSPARENT);
 }
 
 // 設置透明狀態欄和透明導航欄
 if (Build.VERSION.SDK_INT >= 21) {
 View decorView = getWindow().getDecorView();
 int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
 | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
 decorView.setSystemUiVisibility(option);
 getWindow().setNavigationBarColor(Color.TRANSPARENT);
 getWindow().setStatusBarColor(Color.TRANSPARENT);
 }
}

透明式狀態欄，只有5.0及以上系統才支持，因此這里先進行了一層if判斷，只有系統版本大于或等于5.0的時候才會執行下面的代碼。接下來我們使用了 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 和 SYSTEM_UI_FLAG_LAYOUT_STABLE ，注意兩個Flag必須要結合在一起使用，表示會讓應用的主體內容占用系統狀態欄的空間，也就是說狀態欄不再占據空間。最后再調用Window的setStatusBarColor()方法將狀態欄設置成透明色就可以了。

三、使用RN的StatusBar來設置，在App首次加載的頁面中對狀態欄進行設置

<StatusBar backgroundColor='transparent' translucent barStyle={'dark-content'} />

這種方式，會在App剛啟動的時候和App啟動時有權限確認、系統彈窗等會先試用系統的默認狀態欄，加載App頁面之后再改變成上面設置的樣式。好處在于可以動態進行設置狀態欄的樣式。

StatusBar屬性簡介：

animated: bool 指定狀態欄的變化是否應以動畫形式呈現。目前支持這幾種樣式：backgroundColor, barStyle和hidden
hidden: bool 是否隱藏狀態欄。
backgroundColor: 狀態欄的背景色。
translucent: bool 指定狀態欄是否透明。設置為true時，應用會在狀態欄之下繪制（即所謂“沉浸式”——被狀態欄遮住一部分）。常和帶有半透明背景色的狀態欄搭配使用。
barStyle: enum('default', 'light-content', 'dark-content') 設置狀態欄文本的顏色。

以上幾種方式都會有一個問題，狀態欄不再占據空間，因此在頁面布局的時候需要加 paddingTop 值為狀態欄的高度。

純前端就可以實現，這也是適配目前主流劉海屏的一種方式，利用StatusBar.currentHeight可以獲取到設備狀態欄的高度。

2.3 隱藏狀態欄和導航欄

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(option);
ActionBar actionBar = getSupportActionBar();
actionBar.hide();

3. 淺色狀態欄的兼容性配置

目前市面上的淺色狀態欄基本都是白底黑字, 支持這種設置的有Android6.0及其以上; MIUI v6及以上, Flyme 4.0及以上

具體兼容方案如下：

Flyme 4.0及以上

public static boolean FlymeSetStatusBarLightMode(Window window, boolean dark) {
 boolean result = false;
 if (window != null) {
 try {
 WindowManager.LayoutParams lp = window.getAttributes();
 Field darkFlag = WindowManager.LayoutParams.class
 .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
 Field meizuFlags = WindowManager.LayoutParams.class
 .getDeclaredField("meizuFlags");
 darkFlag.setAccessible(true);
 meizuFlags.setAccessible(true);
 int bit = darkFlag.getInt(null);
 int value = meizuFlags.getInt(lp);
 if (dark) {
 value |= bit;
 } else {
 value &= ~bit;
 }
 meizuFlags.setInt(lp, value);
 window.setAttributes(lp);
 result = true;
 } catch (Exception e) {

 }
 }
 return result;
}

Android6.0及以上

public static void setAndroidNativeLightStatusBar(Activity activity, boolean dark) {
 //狀態欄字體圖標顏色
 View decor = activity.getWindow().getDecorView();
 if (dark) {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
 decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR //淺色狀態欄(字體圖標白色)
 | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN //contentView 全屏(置于statusbar之下)
 | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
 }
 } else {
 decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
 }
}

MIUI v6及以上

public static boolean MIUISetStatusBarLightMode(Activity activity, boolean dark) {
 if(Build.VERSION.SDK_INT >= 24){
 return false;
 }
 boolean result = false;
 Window window=activity.getWindow();
 if (window != null) {
 Class clazz = window.getClass();
 try {
 int darkModeFlag = 0;
 Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams");
 Field field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE");
 darkModeFlag = field.getInt(layoutParams);
 Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class);
 if(dark){
 extraFlagField.invoke(window,darkModeFlag,darkModeFlag);//狀態欄透明且黑色字體
 }else{
 extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字體
 }
 result=true;

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
 //開發版 7.7.13 及以后版本采用了系統API，舊方法無效但不會報錯，所以兩個方式都要加上
 if(dark){
 activity.getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
 }else {
 activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
 }
 }
 }catch (Exception e){

 }
 }
 return result;
}

在MainActivity的onCreate中調用

LightStatusBarUtil.FlymeSetStatusBarLightMode(this.getWindow(), false);
LightStatusBarUtil.MIUISetStatusBarLightMode(this, false); 
LightStatusBarUtil.setAndroidNativeLightStatusBar(this, true);

總結

實現透明狀態欄，以上方案都沒有完全兼容android 4.4以下版本，個人覺得比較合適的做法是 android設置透明狀態欄 + 淺色狀態欄的兼容性配置 + StatusBar 來配合控制

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com