react-native android状态栏的实现

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