StatusBar状态栏设置及设备适配

        最近在开发导航组件过程中有涉及到StatusBar控制状态栏样式的问题，以下对遇到的问题进行记录总结。

        react-native为移动端开发控制状态栏提供了StatusBar组件，同时StatusBar也暴露出一个静态API，但是如果通过静态API或在同一组件上渲染相同属性，则后渲染的属性会覆盖前面渲染的属性，我所修改的组件就是出现了这个问题，在原组件中是通过StatusBar.setBarStyle来对状态栏字体样式进行设置，当通过点击进入新页面导航样式改变时，状态栏样式也会随之改变，但是当从新页面回退到原页面时，原页面不会重新渲染，原页面的状态栏字体样式已经被新页面的样式改变所覆盖，这样就会产生样式不协调的问题。

我解决此问题的过程：

        我想到的第一种方法就是在每个组件中都引入StatusBar组件，这样每个组件都有属于自己的StatusBar组件，这样当切换页面时设置状态栏样式的时候就不会产生覆盖原页面的状态栏式。

StatusBar

常量

currentHeight（仅Android）：获取状态栏高度

StatusBar.currentHeight

通用属性

1.animated（bool类型）

(1)设置当前状态栏发生变化时是否需要加入动画。

(2)动画支持backgroundColor、barStyle和hidden属性的变化。

<StatusBar animated = {true}> </StatusBar>

2.barStyle（类型：enum('default', 'light-content', 'dark-content')）

设置状态栏字体样式

<StatusBar barStyle = {'light-content'}> </StatusBar>

3.hidden（bool类型）

设置状态栏显示与隐藏

<StatusBar hidden = {true}> </StatusBar>

Android属性

1.backgroundColor（color类型）

<