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()方法。

    如果你有更好的方法，請留言，多謝。

------記錄工作中的點點滴滴，書寫碼農的平凡歲月！------