簡(jiǎn)介
StatusBar 是 React Native 用來(lái)設(shè)置并動(dòng)態(tài)改變?cè)O(shè)備的狀態(tài)欄的組件,可以通過(guò)設(shè)置 StatusBar 的樣式實(shí)現(xiàn)不同頁(yè)面顯示的狀態(tài)欄不同;
作為跨平臺(tái)組件,StatusBar 有些屬性是通用的,但有些則是 iOS / Android 獨(dú)有的;所以我們開(kāi)發(fā)時(shí)要做好適配。
通用屬性
- animated (bool)
- 指定狀態(tài)欄的變化是否應(yīng)以動(dòng)畫形式呈現(xiàn)。目前支持這幾種樣式:backgroundColor, barStyle和hidden。
- hidden (bool)
- 是否隱藏狀態(tài)欄。
常量
- currentHeight 狀態(tài)欄的當(dāng)前高度
iOS屬性
- barStyle
- 設(shè)置狀態(tài)欄文本的顏色
enum('default', 'light-content', 'dark-content')
- networkActivityIndicatorVisible (bool)
- 指定是否顯示網(wǎng)絡(luò)活動(dòng)提示符。
- showHideTransition
- 通過(guò)hidden屬性來(lái)顯示或隱藏狀態(tài)欄時(shí)所使用的動(dòng)畫效果。默認(rèn)值為'fade'。
enum('fade', 'slide','none')
僅Android
- backgroundColor color
- 狀態(tài)欄的背景色。
- translucent (bool)
- 指定狀態(tài)欄是否透明。設(shè)置為true時(shí),應(yīng)用會(huì)在狀態(tài)欄之下繪制(即所謂“沉浸式”——被狀態(tài)欄遮住一部分)。常和帶有半透明背景色的狀態(tài)欄搭配使用。
- StatusBar.currentHeight
React Native 在 Android 平臺(tái)為 StatusBar 組件提供了一個(gè)靜態(tài)常量 currentHeight,我們可以通過(guò)讀取這個(gè)常量來(lái)得到 Android 手機(jī)狀態(tài)欄的高度。
StatusBar組件可以同時(shí)加載多個(gè)。此時(shí)屬性會(huì)按照加載順序合并(后者覆蓋前者)。一個(gè)典型的用法就是在使用Navigator時(shí),針對(duì)不同的路由指定不同的狀態(tài)欄樣式,如下:
<View>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Navigator
initialRoute={{statusBarHidden: true}}
renderScene={(route, navigator) =>
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
}
/>
</View>