在操作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 * 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 ( <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);运行截图如下:
上面只是针对StatusBar组件做了比较简单的演示，更多用法可见官方实例:https://github.com/facebook/react-
