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); }}