react-native沉浸式状态栏
该StatusBar状态栏组件用来实现控制应用的状态栏的效果。根据官方文档说明了StatusBar(状态栏)和Navigator(导航器)搭配的用法：
StatusBar组件可以同时加载多个组件，该组件的属性可以按照加载的顺序进行合并。一种常见的用法就是:我们可以在使用Navitator的时候，针对不同的路由页面进行设置特殊的状态栏样式。具体可以看一下官方实例代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
backgroundColor=
"blue"
barStyle=
"light-content"
/>
initialRoute={{statusBarHidden:
true
}}
renderScene={(route, navigator) =>
...
}
/>
|
(二)属性
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
* https://github.com/facebook/react-native
*/
'use strict'
;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
StatusBar,
TouchableHighlight,
} from
'react-native'
;
//简单封装一个组件
class CustomButton extends React.Component {
render() {
return
(
style={styles.button}
underlayColor=
"#a5a5a5"
onPress={
this
.props.onPress}>
this
.props.text}
);
}
}
class StatusBarDemo extends Component {
constructor(props){
super
(props);
this
.state={
};
}
render() {
return
(
backgroundColor=
'#ff0000'
translucent={
true
}
hidden={
true
}
animated={
true
}
/>
);
}
}
const styles = StyleSheet.create({
button: {
margin:5,
backgroundColor:
'white'
,
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor:
'#cdcdcd'
,
}
});
AppRegistry.registerComponent(
'StatusBarDemo'
, () => StatusBarDemo);
|
运行截图如下:
上面只是针对StatusBar组件做了比较简单的演示，更多用法可见官方实例:https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/StatusBarExample.js