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   * 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-