实例：

AppStateIOS简介

AppStateIOS类似于iOS中的AppDelegate.h的作用，
我们可以通过他来获取APP运行过程中的各种状态，比如，激活状态，状态改变，还经常用来做推送通知。

它拥有添加和删除事件的静态方法，因此，我们可以在代码中添加事件监听，属性和事件如下：

StatusBarIOS简介

状态栏操作API

3个静态方法：

我们来搞出些事情

封装一个组件，用来测试AppStateIOS 和 StausBarIOS中的API。

statel.js

var React = require('react-native')

var {
    AppRegistry,StyleSheet,AlertIOS,View,Text,AppStateIOS,TouchableOpacity,StatusBarIOS,} = React;


var styles = StyleSheet.create({

    flex: {
        flex: 1,},position: {
        marginTop: 74,alignSelf: 'center'
    },font: {
        fontSize : 20,color: '#222222',}

})

StatusBarIOS.setStyle('default');

var State = React.createClass({
    getInitialState: function(){
        return{
            currentAppState:null,states:[]
        };
    },componentDidMount:function(){
        AppStateIOS.addEventListener('change',this._handleAppStateChange);
        AppStateIOS.addEventListener('memoryWarning',this._handleAppStateChange);
    },componentWillUnmount: function(){
        AppStateIOS.removeEventListener('change',this._handleAppStateChange);
        AppStateIOS.removeEventListener('memoryWarning',_handleAppStateChange:function(currentAppState){
        var states = this.state.states;
        states.push(currentAppState);
        this.setState({
            currentAppState,states
        });

    },render:function(){
        return(
            <View style = {styles.flex}>
                <TouchableOpacity onPress = {this.showLater}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.position,styles.font]}> AppStateIOS 测试  + {this.state.currentAppState}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.showLoading}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> 开始loading
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.endLoading}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> 停止loading
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.defaultStatusBar}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> default样式
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.lightStatusBar}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> light－content样式
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.hidenStatusBar}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> 隐藏状态栏
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress = {this.showStatusBar}
                                  style = {styles.flex}>
                    <Text style = {[styles.flex,styles.font]}> 显示状态栏
                    </Text>
                </TouchableOpacity>
            </View>
        )
    },showLater: function(){

        var later = '历史数据'
        for(var i in this.state.states){
                alert('later：'+this.state.states[i]);
        }
    },showLoading: function(){
        StatusBarIOS.setNetworkActivityIndicatorVisible(true);
    },endLoading: function(){
        StatusBarIOS.setNetworkActivityIndicatorVisible(false);
    },lightStatusBar: function() {
        StatusBarIOS.setStyle('light-content');
    },defaultStatusBar: function() {
        StatusBarIOS.setStyle('default');
    },hidenStatusBar: function() {
        StatusBarIOS.setHidden(true);
    },showStatusBar: function() {
        StatusBarIOS.setHidden(false);
    }

});

module.exports = State

在ios.index.js中我们这样做：

'use strict';
var React = require('react-native');
var State = require('./iOSFile/statel.js');

var {
  AppRegistry,Image,ScrollView,WebView,NavigatorIOS,AsyncStorage,} = React;

var styles = StyleSheet.create({
    container : {
        flex: 1
    },row : {
        flexDirection: 'row',marginBottom: 10,item : {
        flex: 1,marginLeft:5,borderWidth: 1,borderColor: '#ddd',marginRight: 5,height: 100,img: {
        flex: 1,backgroundColor: 'transparent',item_text: {
        backgroundColor: '#000',opacity:0.7,color:'#fff',height:25,lineHeight:18,textAlign:'center',marginTop:74
    },btn: {
        backgroundColor: '#ff7200',height: 33,textAlign : 'center',color: '#fff',marginLeft:10,marginRight: 10,lineHeight: 24,marginTop: 40,fontSize: 18,list_item : {
        marginLeft: 5,padding:5,height: 30,borderRadius: 3,list_item_desc : {
        flex: 2,fontSize: 15,list_item_price: {
        flex: 1,textAlign: 'right',clear: {
        marginTop : 10,backgroundColor: '#fff',color: '#000',borderWidth:1,marginLeft: 10,marginRight:10,height:33,textAlign: 'center',}

});

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.container} initialRoute = { { component:State,title:'样式列表',barTintColor: '#ddd' } }/> ); } }); AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

代码中的styles 中有很多没有用上，由于代码繁多，这里我就一一拿出来了，复制过去即可。