本來應該是使用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);