React-Native StatusBar的简单使用

本来应该是使用StatusBarIOS的，但是发现StatusBarIOS竟然报错了，只好使用StatusBar，没关系，两者的基本功能都是一样的。

结合NavigatorIOS使用的效果：

Untitled1.gif

StatusBar的主要属性：

• hidden：StatusBar状态栏是否隐藏，默认显示

• barStyle：设置状态栏文本的颜色 enum('default'默认的样式（IOS为白底黑字、Android为黑底白字）, 'light-content' 黑底白字, 'dark-content'白底黑字)

• backgroundColor：状态栏的背景色，只支持Android

• translucent：指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。只支持Android

• networkActivityIndicatorVisible：指定是否显示网络活动提示符，只支持iOS

• showHideTransition：enum('fade', 'slide')通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'，只支持iOS

使用方法：

<View style={{flex: 1, backgroundColor: '#ffaaff'}}>
                <StatusBar barStyle={"dark-content"}
                           networkActivityIndicatorVisible={true}
                           showHideTransition={'fade'}/>
            </View>

效果图代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    NavigatorIOS,
    StatusBar
} from 'react-native';

export default class Navigator extends Component{
    render(){
        return(
                <NavigatorIOS ref="nav"
                              style={{flex: 1}}
                              initialRoute={{
                                  component: MianView,
                                  title: 'nnn',
                                  passProps: {},
                                  rightButtonTitle: 'NA1  ',
                                  onRightButtonPress: ()=>{
                                      this.refs.nav.push({
                                          component: Naview2,
                                          title: 'vvv',
                                          rightButtonTitle: 'NA2  ',
                                          onRightButtonPress: () => {
                                              this.refs.nav.push({
                                                  component: Naview3,
                                                  title: 'sss',
                                                  onLeftButtonPress: () => {
                                                      this.refs.nav.pop({

                                                      });
                                                  }
                                              })
                                          },
                                          onLeftButtonPress: () => {
                                              this.refs.nav.pop({

                                              });
                                          }
                                      })
                                  },
                                  onLeftButtonPress: () => {
                                      this.refs.nav.pop({

                                      });
                                  }
                              }}/>
        )
    }
}
class MianView extends Component{
    render(){
        return(
            <View style={{flex: 1, backgroundColor: '#ffaaff'}}>
                <StatusBar barStyle={"dark-content"}
                           networkActivityIndicatorVisible={true}
                           showHideTransition={'fade'}
                           animated={true}
                           translucent={true}/>
            </View>
        )
    }
}
class Naview2 extends Component{
    render(){
        return(
            <View style={{flex: 1, backgroundColor: '#aaaaff'}}>
                <StatusBar barStyle={"light-content"}
                           networkActivityIndicatorVisible={false}
                           showHideTransition={'slide'}/>
            </View>
        )
    }
}
class Naview3 extends Component{
    render(){
        return(
            <View style={{flex: 1, backgroundColor: '#ffaaaa'}}>
                <StatusBar hidden={true}/>
            </View>
        )
    }
}
AppRegistry.registerComponent('Navigator', ()=>Navigator);