react native StatusBar的簡單見解
在操作statusBar遇到的一些問題：
1.statusBar的操作以最後的一次操作為準。
2.比如status的背景顏色。
今天我們繼續來看一下StatusBar狀態列元件的講解以及使用例項。
該StatusBar狀態列元件用來實現控制應用的狀態列的效果。根據官方文件說明了StatusBar(狀態列)和Navigator(導航器)搭配的用法：
StatusBar元件可以同時載入多個元件，該元件的屬性可以按照載入的順序進行合併。一種常見的用法就是:我們可以在使用Navitator的時候，針對不同的路由頁面進行設定特殊的狀態列樣式。具體可以看一下官方例項程式碼:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<View>
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<Navigator
initialRoute={{statusBarHidden:
true}}
renderScene={(route, navigator) =>
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
}
/>
</View>
|
(二)屬性
1.animated bool 進行設定當狀態列的狀態發生變化的時候是否需要加入動畫。當前該動畫支援backgroundColor,barStyle和hidden屬性
2.hidden bool 進行設定狀態列是否隱藏
3.backgroundColor color型別，僅支援Android裝置，設定狀態列的背景顏色
4.translucent bool型別，僅支援Android裝置, 進行設定狀態列是否為透明。當狀態列的值為true的時候，應用將會在狀態列下面進行繪製顯示。這樣在Android平臺上面就是沉浸式的效果，可以達到Android和iOS應用一致性效果。該值常常配置半透明效果的狀態列顏色一起使用
5.barStyle enum('default','light-content') 列舉型別，僅支援iOS裝置。進行設定狀態列文字的顏色
6.networkActivityIndicatorVisible bool型別，僅支援iOS裝置。設定狀態列上面的網路進度載入器是否進行顯示
7.showHideTransition enum('fade','slide') 列舉型別，僅支援iOS裝置。進行設定當隱藏或者顯示狀態列的時候的動畫效果。預設值為'fade'
(三)例項
上面對於StatusBar元件做了介紹和屬性講解，下面用一個例項演示一下。具體例項程式碼如下:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/**
* Sample React Native App
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
StatusBar,
TouchableHighlight,
} from 'react-native';
//簡單封裝一個元件
class CustomButton extends React.Component {
render() {
return
(
<TouchableHighlight
style={styles.button}
underlayColor="#a5a5a5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
class StatusBarDemo extends Component {
constructor(props){
super(props);
this.state={
};
}
render() {
return
(
<View>
<StatusBar
backgroundColor='#ff0000'
translucent={true}
hidden={true}
animated={true}
/>
<CustomButton text='狀態列隱藏透明效果'/>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
margin:5,
backgroundColor:
'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor:
'#cdcdcd',
}
});
AppRegistry.registerComponent('StatusBarDemo', () => StatusBarDemo);
|
執行截圖如下:
