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>
        );
    }
}