一、StatusBar組件介紹
- StatusBar 是 React Native 0.20 起新增的跨平臺組件，它可以用來設(shè)置并動態(tài)改變設(shè)備的狀態(tài)欄顯示特性。
- StatusBar 組件可以同時加載多個 StatusBar 組件，這些 StatusBar 組件的屬性可以按照加載的順序進行合并。一種常見的用法就是：我們可以在使用 Navitator 的時候，針對不同的路由頁面設(shè)置特殊的狀態(tài)欄樣式。
- 雖然 StatusBar 是跨平臺組件，但其中有些屬性是通用的，而有些則是 iOS 或 Android 獨有的。所以我們開發(fā)時要做好適配。
二、通用屬性介紹
1.animated
設(shè)置當狀態(tài)欄的狀態(tài)發(fā)生變化時，是否需要加入動畫。
動畫支持 backgroundColor、barStyle 和 hidden 屬性的變化。
2.hidden
設(shè)置狀態(tài)欄是否隱藏。
三、僅支持iOS的屬性
1.barStyle
用于設(shè)置狀態(tài)欄文字的顏色，其值是枚舉類型:
default：黑色文字（默認）
light-content：白色文字
<StatusBar barStyle={'light-content'} />
2.networkActivityIndicatorVisible
設(shè)定網(wǎng)絡(luò)活動指示器(就是那個菊花)是否顯示在狀態(tài)欄。
<StatusBar networkActivityIndicatorVisible={true} />
3.showHideTransition
通過 hidden 屬性來顯示或隱藏狀態(tài)欄時所使用的動畫效果，有兩種選擇：fade（默認值）、slide
四、僅支持Android的屬性
1.backgroundColor
Android 設(shè)備上狀態(tài)欄的背景顏色
<StatusBar backgroundColor={'blue'} />
2.translucent
設(shè)置狀態(tài)欄是否為透明。
當狀態(tài)欄的值為 true 的時候，應用將會在狀態(tài)欄下面進行繪制顯示。這樣在 Android 平臺上面就是沉浸式的效果，可以達到 Android 和 iOS 應用顯示效果的一致性。
該值常常同配置半透明效果的狀態(tài)欄顏色一起使用。
<StatusBar translucent={true} />
3.StatusBar.currentHeight
React Native 在 Android 平臺為 StatusBar 組件提供了一個靜態(tài)常量 currentHeight，我們可以通過讀取這個常量來得到 Android 手機狀態(tài)欄的高度。
注意：currentHeight 不是一個屬性，我們直接訪問 StatusBar.currentHeight 就可以了。
五、不同平臺下狀態(tài)欄的處理
1、Android 手機狀態(tài)欄
- 當狀態(tài)欄呈現(xiàn)在 Andorid 手機屏幕頂部時，它會占用頂部這個空間，我們只能使用剩下的屏幕空間。也就是說如果從第 0 行開始放置組件時，組件會緊貼著狀態(tài)欄的下邊沿顯示。
- 要想知道實際可用的屏幕高度，可以通過手機屏幕的高度減去狀態(tài)欄高度得到。
2、iOS 手機狀態(tài)欄
- 在 iOS 平臺上，取得的屏幕高度就是實際可使用的高度。
- 如果從第 0 行開始排列組件時，組件會緊貼著手機屏幕的最上沿顯示。如果狀態(tài)欄沒有被隱藏，它將覆蓋在第 0 行組件的上方。
- 如果不想設(shè)置狀態(tài)欄隱藏，則應當空出狀態(tài)欄的顯示區(qū)域。但可以為這個區(qū)域設(shè)置背景色，以使整個界面風格統(tǒng)一。
