react-native 安卓完全沉浸式状态栏实现（标签导航）

此篇教程会持续更新。。。

react-native安卓简单沉浸式状态栏实现  使用的导航是react-navigation

这篇教程包含一些准备工作，也就是了解StatusBar组件的相关属性与方法。

测试：苹果虚拟机IOS11.1；安卓8.0的华为Mate9。

编写环境：在macbook Pro笔记本中；

                      使用的xcode版本是9.1；

                      使用的Android Studio3.2；

                      使用React Native项目版本是0.50.0；

                      使用的是VScode编写的代码；

看完这篇教程以后写出来的状态栏就跟苹果的一模一样了，这样界面就统一了，至于为什么我们将就苹果而不是将就安卓，我的个人观点是我喜欢沉浸式状态栏，如果你喜欢状态栏与下面的内容分离，那么你可以将IOS的改为安卓的那种，至于怎么实现，如果学会了这篇，那么将IOS转换成安卓就是小case。

在标签导航中（createBottomTabNavigator）的沉浸式状态栏

标签导航很常见，几乎每一个APP都有标签导航，我们看看安卓手机上的QQ，看看对应的状态栏。

QQ的状态栏（未滑出通知）

（里面的头像是我，很丑）；当我此时需要滑下通知时，通知收起以后就变成下面这个样子了。

QQ的状态栏（收起通知以后）

我看到以后发现这样不好看，然后我又看了看天猫淘宝这些的软件，发现这没有这个问题，而我们要实现的就是始终适配的状态栏，即便导航栏颜色发生改变状态栏也发生改变。

如果你有这样的需求，那么就跟着我做出下面的效果：

沉浸式状态栏（我想要的）

组件StatusBar的相关属性和方法（函数），请戳react-native安卓简单沉浸式状态栏实现或者去中文官网StatusBar

通过了解就可以实现简单的沉浸式状态栏，看下面代码（需要将其放在最外层组件的第一孩子的位置）：

                   barStyle={'dark-content'} //状态栏样式（黑字）

                   />

这样就将状态栏的背景颜色设置成上面代码的颜色（灰色），同时设置状态栏样式，让里面的字体图标显示黑色，感觉很简单，似乎已经解决问题了，如果你的标签导航每一个的导航都是这种颜色，那么已经完成了；剩下的是我们对标签导航里面导航的颜色不同的情况，因为当颜色不同的时候就会导致状态栏颜色保存最后点击标签导航页面导航的颜色与样式。

如果要解决这个问题需要了解标签导航的生命周期，请戳链接react-navigation之createBottomTabNavigator的生命周期了解，等你了解以后再回来看，就会更明白，更透彻。

标签导航只会自动渲染一次（如果没有加定时器或者监听器），其余时间都不会渲染，也就是再次点击的时候会显示第一次点进去渲染完成的页面，知道了这些我们就理解上面的问题了，于是尝试了各种方法，最终在官网找到了答案React Navigation 2.x，在navigationOptions里面有一个属性，接受一个回调函数（方法），这个回调函数（方法）里面提供一个对象：

tabBarOnPress处理点击事件的回调; 该参数是一个对象，其中包含：

navigation：页面的 navigation props

defaultHandler: tab press 的默认 handler

在开始转换到下一个场景之前添加自定义逻辑（点击的场景）。

通过对这个方法的重写就可以在点击标签导航里面的每一个页面时调用这个方法，这样就可以在这个方法中去实现我想更新的内容，在这里我想更新的是状态栏的样式与背景颜色，于是我写了如果代码：

tabBarOnPress:({navigation,defaultHandler}) => {

            StatusBar.setBarStyle('dark-content',true);

            Platform.OS == 'android' ? StatusBar.setBackgroundColor('rgba(0,0,0,0)',true):'';//背景颜色是透明

            Platform.OS == 'android'?StatusBar.setTranslucent(true):'';//设置状态栏透明

            defaultHandler();//导航的默认行为，比如说标签导航下面的图标与颜色选中与未选中颜色的不同

}

这样当我切换标签导航页面时就会执行这个方法，就会变成我想要的效果，其中Platform.OS == 'android' 是判断是不是安卓手机，因为这个方法仅支持安卓，使用这个需要导入Platform，导入方法import {Platform} from 'react-native';

之所以设置透明setTranslucent，是因为设置这个以后就可以让状态栏也可以绘制，设置背景颜色为透明，这样就完全跟苹果一样了，这样工作差不多就完成了，还有一点点需要注意，那就是当第一次进入标签导航的时候此时并没有点击任何页面而是显示的是默认展示的页面，或者我们设置的初始化显示的页面；这个页面的状态栏各种样式还得需要使用StatusBar组件在render中，而标签导航的的其他页面就只需要添加那个方法就可以了，而StatusBar组件就不需要添加了。