怎么在 android中使用react-native實現(xiàn)狀態(tài)欄？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司成立于2013年，先為新樂等服務(wù)建站，新樂等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為新樂企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

1. 導(dǎo)航欄：就是設(shè)備頂部的網(wǎng)絡(luò)、時間、電量等信息欄

2. ActionBar: 返回按鈕以及系統(tǒng)默認的header區(qū)域，RN開發(fā)中一般不會用到，RN中在navigation中進行定制

3. 導(dǎo)航欄: 設(shè)備下方的物理返回、回桌面、選擇應(yīng)用程序等系統(tǒng)導(dǎo)航欄

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

1. 默認展示，一直顯示手機系統(tǒng)的狀態(tài)欄

2. 透明狀態(tài)欄，狀態(tài)欄背景顏色透明，狀態(tài)欄顏色與App顏色一致，用戶界面更加整體。

3. 隱藏狀態(tài)欄(沉浸式)，狀態(tài)欄完全隱藏，類似于全屏游戲、視頻播放器的效果

2.1 默認展示

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

2.2 透明狀態(tài)欄

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

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

一、使用App的主題進行配置,在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及以上，會在App啟動的時候就生效, 在App啟動時有權(quán)限確認、系統(tǒng)彈窗等也不受影響，在彈出modal之類的深色蒙層時狀態(tài)欄字體會變成成淺色

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

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

二、android原生設(shè)置,在MainActivity的onCreate中進行設(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)才支持，因此這里先進行了一層if判斷，只有系統(tǒng)版本大于或等于5.0的時候才會執(zhí)行下面的代碼。 接下來我們使用了 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 和 SYSTEM_UI_FLAG_LAYOUT_STABLE ，注意兩個Flag必須要結(jié)合在一起使用，表示會讓應(yīng)用的主體內(nèi)容占用系統(tǒng)狀態(tài)欄的空間，也就是說狀態(tài)欄不再占據(jù)空間。最后再調(diào)用Window的setStatusBarColor()方法將狀態(tài)欄設(shè)置成透明色就可以了。

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

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

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

StatusBar屬性簡介：

1. animated: bool 指定狀態(tài)欄的變化是否應(yīng)以動畫形式呈現(xiàn)。目前支持這幾種樣式：backgroundColor, barStyle和hidden

2. hidden: bool 是否隱藏狀態(tài)欄。

3. backgroundColor: 狀態(tài)欄的背景色。

4. translucent: bool 指定狀態(tài)欄是否透明。設(shè)置為true時，應(yīng)用會在狀態(tài)欄之下繪制（即所謂“沉浸式”——被狀態(tài)欄遮住一部分）。常和帶有半透明背景色的狀態(tài)欄搭配使用。

5. barStyle: enum('default', 'light-content', 'dark-content') 設(shè)置狀態(tài)欄文本的顏色。

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

純前端就可以實現(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)欄字體圖標顏色
 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)欄(字體圖標白色)
     | 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) {
    //開發(fā)版 7.7.13 及以后版本采用了系統(tǒng)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中調(diào)用

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁題目：怎么在android中使用react-native實現(xiàn)狀態(tài)欄-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://m.newbst.com/article44/hjehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、定制開發(fā)、品牌網(wǎng)站制作、虛擬主機、響應(yīng)式網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)