React Native沉浸式状态栏以及有时不刷新问题

    根据项目组的安排，最近接触了React Native。在经过一段煎熬的适应之后，慢慢的发现React Native确实有它的优势和独到之处，这个不是本文的重点，所以还没接触或刚接触React Native的小伙伴们，慢慢体会吧。

    废话不多讲，言归正传，本文重点聊聊状态栏，以及有时状态栏不刷新问题。

    现在的APP绝大部分都是沉浸式状态栏的，在React Native开发中，它提供了StatusBar进行适配，适配方式有两种方式，请停在下慢慢道来：

    第一种是API，StatusBar提供了一些静态API，有兴趣的小伙伴请看源码，我这里只写与沉浸式紧密相关的API，例如在componentWillMount()中，如下所示：

        StatusBar.setBackgroundColor("transparent");
        StatusBar.setTranslucent(true);
        StatusBar.setBarStyle('light-content');

   （1）StatusBar.setBackgroundColor("transparent")：是将状态栏的背景颜色设置为透明的，这样就可以看到状态栏下层的布局了。

    （2）StatusBar.setTranslucent(true)：是将状态栏设置为透明的，这样我们的布局就可以在状态栏的下层进行绘制，即我们的布局可以上移到状态栏的位置，这样就达到沉浸式的效果了。若为false，我们的布局是紧挨着状态栏进行绘制。

    （3）StatusBar.setBarStyle('light-content')：是把状态栏的文字/图标设置为白色，其值是枚举类型：enum('default', 'light-content', 'dark-content')，'default'是默认黑色，'dark-content'是暗色

    第二种是组件，组件的方式必须是在render()的跟View的第一行位置，老规矩，先看代码实例：

   render() {
        return (
            <View>
                <StatusBar
                    backgroundColor={'transparent'}
                    translucent={true}
                    barStyle={'light-content'}
                />
                ......
            </View>
        );
    }

    React Native的StatusBar是全局生效，即在某一处设置过后，所有的js都会生效，所以，如果UI不统一，那就需要每个js都要适配。例如如果A界面的状态栏是白色文字，而B界面要求是暗色文字，那么在A跳转到B界面时，B界面的状态栏必须要重置为'light-content'。另外，如果仅仅是文字颜色不同，当采用API方式时，只需执行StatusBar.setBarStyle('dark-content')这一句即可，如果是组件方式，必须全部重置。

    经过上面的设置后，沉浸式状态栏基本上搞定了，为什么是基本上呢，是因为发现，当'light-content'与'dark-content'不同的界面来回跳转切换时，有时状态栏并没有刷新，从流程上来分析，确实执行了刷新代码，但界面就是没效果，心碎啊。

    经过一番周折与检测后，找到了一种方式，就是监听"willFocus"，在它里面执行setBarStyle()方法。

    如果你有更好的方法，请留言，多谢。

------记录工作中的点点滴滴，书写码农的平凡岁月！------