react native StatusBar 使用详解

StatusBar 是手机顶部的状态条。
属性：

animated：状态栏变化时是否使用动画。
hidden：是否隐藏状态栏。
backgroundColor：仅作用于android。 状态栏背景色。
translucent：仅作用于android。 是否透明。
barStyle：状态栏文本的颜色（’default’, ‘light-content’, ‘dark-content’）。
networkActivityIndicatorVisible：仅作用于ios。是否显示正在使用网络。
showHideTransition：仅作用于ios。显示或隐藏状态栏时所使用的动画效果（’fade’, ‘slide’）。

Demo：

/** * Created by on 2017/4/27. */import React, {Component} from 'react';import {    StyleSheet,    View,    StatusBar,    Text,    Button,    TouchableHighlight,} from 'react-native';function getValue<T>(values: Array<T>, index: number): T {    return values[index % values.length];}export default class StatusBarDemo extends Component {    static navigationOptions = {        title: 'StatusBar',        header: {            //style:{backgroundColor: 'black',},        }    };    state = {        animated: true,        hidden: false,        backgroundColor:'white',        translucent:false,        barStyle:'default',        networkActivityIndicatorVisible:false,        showHideTransition:'fade',    }    render() {        return (            <View style={{flex:1}}>                <StatusBar                    animated={this.state.animated}                    hidden={this.state.hidden}                    backgroundColor={this.state.backgroundColor}                    translucent={this.state.translucent}                    barStyle={this.state.barStyle}                    networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}                    showHideTransition={this.state.showHideTransition}                />                <Button title={this.state.animated?'禁用动画':'使用动画'} onPress={()=>{this.setState({animated:!this.state.animated})}}/>                <Button title={this.state.hidden?'显示':'隐藏'} onPress={()=>{this.setState({hidden:!this.state.hidden})}}/>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>设置背景色：</Text>                    <Button title='红色' onPress={()=>{this.setState({backgroundColor:'red'})}}/>                    <Button title='蓝色' onPress={()=>{this.setState({backgroundColor:'blue'})}}/>                    <Button title='半透明' onPress={()=>{this.setState({backgroundColor:'#80000000'})}}/>                </View>                <Button title={this.state.translucent?'不透明':'透明'} onPress={()=>{this.setState({translucent:!this.state.translucent})}}/>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>设置样式：</Text>                    <Button title='default' onPress={()=>{this.setState({barStyle:'default'})}}/>                    <Button title='light-content' onPress={()=>{this.setState({barStyle:'light-content'})}}/>                    <Button title='dark-content' onPress={()=>{this.setState({barStyle:'dark-content'})}}/>                </View>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>显示或隐藏动画效果：</Text>                    <Button title='fade' onPress={()=>{this.setState({showHideTransition:'fade'})}}/>                    <Button title='slide' onPress={()=>{this.setState({showHideTransition:'slide'})}}/>                </View>            </View>        );    }}

github下载地址