> [StatusBarIOS](http://facebook.github.io/react-native/docs/statusbarios.html#content)
## 方法
| 名称 | 意义 |
| --- | --- |
| setStyle | 设置样式 |
| setHidden | 设置隐藏 |
| setNetworkActivityIndicatorVisible | 设置网络小菊花是否可见 |
## 实例
~~~
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
Text,
TouchableHighlight,
StatusBarIOS,
} = React;
exports.framework = 'React';
exports.title = 'StatusBarIOS';
exports.description = 'Module for controlling iOS status bar';
exports.examples = [{
title: 'Status Bar Style',
render() {
return (
<View>
{['default', 'light-content'].map((style) =>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setStyle(style)}>
<View style={styles.button}>
<Text>setStyle('{style}')</Text>
</View>
</TouchableHighlight>
)}
</View>
);
},
}, {
title: 'Status Bar Style Animated',
render() {
return (
<View>
{['default', 'light-content'].map((style) =>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setStyle(style, true)}>
<View style={styles.button}>
<Text>setStyle('{style}', true)</Text>
</View>
</TouchableHighlight>
)}
</View>
);
},
}, {
title: 'Status Bar Hidden',
render() {
return (
<View>
{['none', 'fade', 'slide'].map((animation) =>
<View>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setHidden(true, animation)}>
<View style={styles.button}>
<Text>setHidden(true, '{animation}')</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setHidden(false, animation)}>
<View style={styles.button}>
<Text>setHidden(false, '{animation}')</Text>
</View>
</TouchableHighlight>
</View>
)}
</View>
);
},
}, {
title: 'Status Bar Network Activity Indicator',
render() {
return (
<View>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(true)}>
<View style={styles.button}>
<Text>setNetworkActivityIndicatorVisible(true)</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.wrapper}
onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(false)}>
<View style={styles.button}>
<Text>setNetworkActivityIndicatorVisible(false)</Text>
</View>
</TouchableHighlight>
</View>
);
},
}];
var styles = StyleSheet.create({
wrapper: {
borderRadius: 5,
marginBottom: 5,
},
button: {
backgroundColor: '#eeeeee',
padding: 10,
},
});
~~~
## 效果
## 小菊花
![](https://box.kancloud.cn/2016-01-07_568e13f400d9c.jpg)
## 隐藏状态栏
![](https://box.kancloud.cn/2016-01-07_568e13f41ed4f.jpg)
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件