React Native出來這么久了牙甫，一直觀望，但也沒好好了解排宰，這陣子抽點時間好好學(xué)習(xí)下吧腰鬼。。卸亮。
一忽妒、StatusBar組件介紹
StatusBar 是 React Native 0.20 起新增的跨平臺組件，它可以用來設(shè)置并動態(tài)改變設(shè)備的狀態(tài)欄顯示特性兼贸。
StatusBar 組件可以同時加載多個 StatusBar 組件段直，這些 StatusBar 組件的屬性可以按照加載的順序進行合并。一種常見的用法就是：我們可以在使用 Navitator 的時候溶诞，針對不同的路由頁面設(shè)置特殊的狀態(tài)欄樣式鸯檬。
雖然 StatusBar 是跨平臺組件，但其中有些屬性是通用的螺垢，而有些則是 iOS 或 Android 獨有的喧务。所以我們開發(fā)時要做好適配。
官方寫法
<View>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Navigator
initialRoute={{statusBarHidden: true}}
renderScene={(route, navigator) =>
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
}
/>
</View>
二枉圃、通用屬性介紹
1蹂楣，animated
（1）設(shè)置當(dāng)狀態(tài)欄的狀態(tài)發(fā)生變化時，是否需要加入動畫讯蒲。（2）動畫支持 backgroundColor痊土、barStyle 和 hidden 屬性的變化。
2墨林，hidden
設(shè)置狀態(tài)欄是否隱藏赁酝。
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
//默認(rèn)應(yīng)用的容器組件
class App extends Component {
//渲染
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} />
</View>
);
}
}
//樣式定義
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#1FB9FF'
},
});
AppRegistry.registerComponent('HelloWorld', () => App);
三、僅支持iOS的屬性
1旭等，barStyle
用于設(shè)置狀態(tài)欄文字的顏色酌呆，其值是枚舉類型:
default：黑色文字（默認(rèn)）
light-content：白色文字
2，networkActivityIndicatorVisible
設(shè)定網(wǎng)絡(luò)活動指示器(就是那個菊花)是否顯示在狀態(tài)欄搔耕。
<StatusBar networkActivityIndicatorVisible={true} />
3隙袁，showHideTransition
通過 hidden 屬性來顯示或隱藏狀態(tài)欄時所使用的動畫效果，有兩種選擇：fade（默認(rèn)值）弃榨、slide
四菩收、僅支持Android的屬性
1，backgroundColor
Android 設(shè)備上狀態(tài)欄的背景顏色
1
<StatusBar backgroundColor={'blue'} />
2鲸睛，translucent
設(shè)置狀態(tài)欄是否為透明娜饵。
當(dāng)狀態(tài)欄的值為 true 的時候，應(yīng)用將會在狀態(tài)欄下面進行繪制顯示官辈。這樣在 Android 平臺上面就是沉浸式的效果箱舞，可以達到 Android 和 iOS 應(yīng)用顯示效果的一致性遍坟。
該值常常同配置半透明效果的狀態(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)欄
（1）當(dāng)狀態(tài)欄呈現(xiàn)在 Andorid 手機屏幕頂部時官帘，它會占用頂部這個空間，我們只能使用剩下的屏幕空間昧谊。也就是說如果從第 0 行開始放置組件時刽虹，組件會緊貼著狀態(tài)欄的下邊沿顯示。
（2）要想知道實際可用的屏幕高度呢诬，可以通過手機屏幕的高度減去狀態(tài)欄高度得到涌哲。
2，iOS 手機狀態(tài)欄
（1）在 iOS 平臺上尚镰，取得的屏幕高度就是實際可使用的高度阀圾。
（2）如果從第 0 行開始排列組件時，組件會緊貼著手機屏幕的最上沿顯示狗唉。如果狀態(tài)欄沒有被隱藏初烘，它將覆蓋在第 0 行組件的上方。
（3）如果不想設(shè)置狀態(tài)欄隱藏分俯，則應(yīng)當(dāng)空出狀態(tài)欄的顯示區(qū)域肾筐。但可以為這個區(qū)域設(shè)置背景色，以使整個界面風(fēng)格統(tǒng)一缸剪。
