react-native android狀態(tài)欄的實(shí)現(xiàn)

2024-05-06 16:44:54

字體：大中小

供稿：網(wǎng)友

react-native 開(kāi)發(fā)App的時(shí)候難免會(huì)遇到狀態(tài)欄的，背景顏色和字體顏色與App內(nèi)容頁(yè)面，色調(diào)適配，間言之就是將狀態(tài)欄顏色與App顏色一致，使用戶(hù)界面更加整體。

1.android設(shè)備系統(tǒng)元素

導(dǎo)航欄：就是設(shè)備頂部的網(wǎng)絡(luò)、時(shí)間、電量等信息欄
ActionBar: 返回按鈕以及系統(tǒng)默認(rèn)的header區(qū)域，RN開(kāi)發(fā)中一般不會(huì)用到，RN中在navigation中進(jìn)行定制
導(dǎo)航欄: 設(shè)備下方的物理返回、回桌面、選擇應(yīng)用程序等系統(tǒng)導(dǎo)航欄

2.狀態(tài)欄的呈現(xiàn)形式

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

2.1 默認(rèn)展示

系統(tǒng)默認(rèn)狀態(tài)欄樣式，無(wú)法改變

2.2 透明狀態(tài)欄

透明狀態(tài)欄很常見(jiàn)，大多數(shù)的App都是使用這種模式，使得狀態(tài)欄顏色與App顏色一致，使用戶(hù)界面更加整體，整個(gè)應(yīng)用看起來(lái)更加美觀。

實(shí)現(xiàn)透明的狀態(tài)欄的方式很多：

一、使用App的主題進(jìn)行配置,在app/main/res/values/styles.xml中設(shè)置主題

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  <item name="android:windowTranslucentStatus">true</item> // 設(shè)置狀態(tài)欄不占據(jù)空間  // <item name="android:windowLightStatusBar">true</item> // 設(shè)置狀態(tài)欄字體顏色 </style></resources>

這種方式支持api19, 即Android4.4及以上，會(huì)在App啟動(dòng)的時(shí)候就生效, 在App啟動(dòng)時(shí)有權(quán)限確認(rèn)、系統(tǒng)彈窗等也不受影響，在彈出modal之類(lèi)的深色蒙層時(shí)狀態(tài)欄字體會(huì)變成成淺色

只設(shè)置 <item name="android:windowTranslucentStatus">true</item> 這種方式設(shè)置的透明狀態(tài)欄，狀態(tài)欄字體默認(rèn)白色，無(wú)法再動(dòng)態(tài)通過(guò)StatusBar改變狀態(tài)欄的背景顏色,在做需要改變狀態(tài)欄背景顏色的時(shí)候就比較尷尬了

再加一個(gè) <item name="android:windowLightStatusBar">true</item> 這樣設(shè)置狀態(tài)欄字體顏色之后，在深色modal彈出的時(shí)候字體不會(huì)動(dòng)態(tài)改變成白色，但可以通過(guò)StatusBar設(shè)置barStyle來(lái)改變，實(shí)際上也不是很方便

二、android原生設(shè)置,在MainActivity的onCreate中進(jìn)行設(shè)置

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 設(shè)置透明狀態(tài)欄 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); }  // 設(shè)置透明狀態(tài)欄和透明導(dǎo)航欄 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); }}

透明式狀態(tài)欄，只有5.0及以上系統(tǒng)才支持，因此這里先進(jìn)行了一層if判斷，只有系統(tǒng)版本大于或等于5.0的時(shí)候才會(huì)執(zhí)行下面的代碼。接下來(lái)我們使用了 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 和 SYSTEM_UI_FLAG_LAYOUT_STABLE ，注意兩個(gè)Flag必須要結(jié)合在一起使用，表示會(huì)讓?xiě)?yīng)用的主體內(nèi)容占用系統(tǒng)狀態(tài)欄的空間，也就是說(shuō)狀態(tài)欄不再占據(jù)空間。最后再調(diào)用Window的setStatusBarColor()方法將狀態(tài)欄設(shè)置成透明色就可以了。

三、使用RN的StatusBar來(lái)設(shè)置，在App首次加載的頁(yè)面中對(duì)狀態(tài)欄進(jìn)行設(shè)置

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

這種方式，會(huì)在App剛啟動(dòng)的時(shí)候和App啟動(dòng)時(shí)有權(quán)限確認(rèn)、系統(tǒng)彈窗等會(huì)先試用系統(tǒng)的默認(rèn)狀態(tài)欄，加載App頁(yè)面之后再改變成上面設(shè)置的樣式。好處在于可以動(dòng)態(tài)進(jìn)行設(shè)置狀態(tài)欄的樣式。

StatusBar屬性簡(jiǎn)介：

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

以上幾種方式都會(huì)有一個(gè)問(wèn)題，狀態(tài)欄不再占據(jù)空間，因此在頁(yè)面布局的時(shí)候需要加 paddingTop 值為狀態(tài)欄的高度。

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

2.3 隱藏狀態(tài)欄和導(dǎo)航欄

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. 淺色狀態(tài)欄的兼容性配置

目前市面上的淺色狀態(tài)欄基本都是白底黑字, 支持這種設(shè)置的有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) { //狀態(tài)欄字體圖標(biāo)顏色 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 //淺色狀態(tài)欄(字體圖標(biāo)白色)     | 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);//狀態(tài)欄透明且黑色字體   }else{    extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字體   }   result=true;   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {    //開(kāi)發(fā)版 7.7.13 及以后版本采用了系統(tǒng)API，舊方法無(wú)效但不會(huì)報(bào)錯(cuò)，所以?xún)蓚€(gè)方式都要加上    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中調(diào)用

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

總結(jié)

實(shí)現(xiàn)透明狀態(tài)欄，以上方案都沒(méi)有完全兼容android 4.4以下版本，個(gè)人覺(jué)得比較合適的做法是 android設(shè)置透明狀態(tài)欄 + 淺色狀態(tài)欄的兼容性配置 + StatusBar 來(lái)配合控制

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到JavaScript/Ajax教程頻道。

上一篇：Webpack devServer中的 proxy 實(shí)現(xiàn)跨域的解決

下一篇：node.js自動(dòng)上傳ftp的腳本分享