React Native API 模块之 AppState 详解

江清清
1,474 阅读3分钟

(一)前言

今天我们继续看另外一个API模块AppState。

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

AppState模块可以告诉用户我们的APP是在前台还是在后台运行，并且当然APP的运行状态发生改变的时候进行通知用户。一般该模块的用途在:当我们进行处理Push(推送)消息的时候，AppState可以帮助我们进行决定内容或者处理的行为意图。

(二)AppState状态

App一般有三种状态分别如下:

1.active   表示当前App在前台运行

2.background    表示当前app运行在后台，此时的用户正在和另外一个app交互，或者用户在home界面(主界面)

3.inactive   该状态我们可以暂时不考虑，因为该状态不会出现在现在React Native App中。

更多内容大家可以查看一下Apple  App的声明周期

(三)基本使用

我们可以通过AppState.currentState来进行检测查询当前的状态，该值是一直会更新保持最新的。当然AppState在刚起来的时候的currentState的值会null的，一直会知道通过桥接获取到原生应用的状态更新通知为止。

下面一起来看一下官方文档提供的一段演示代码:

};
},
componentDidMount: function() {
  AppState.addEventListener('change', this._handleAppStateChange);
},
componentWillUnmount: function() {
  AppState.removeEventListener('change', this._handleAppStateChange);
},
_handleAppStateChange: function(currentAppState) {
  this.setState({ currentAppState, });
},
render: function() {
  return (
    Current state is: {this.state.currentAppState}
  );
},

上述的例子会看到"Current state is:active"，因为当app的状态为active的时候才能被用户看到。currentState为null的时候只会发生在启动的时候，该时间是很短的。

(四)模块方法

1.addEventListener(type:string,handler:Function)  static  模块静态方法，添加一个AppState状态变化的监听方法。方法参数填入type:'change'以及处理方法

2.removeEventListener(type:string,handler:Function) static 模块静态方法，移除一个AppState状态的监听方法，方法参数和上面的一样。

(五)属性

currentState:标志当前状态类型

(六)AppState实例

上面我们讲解了AppState的基本内容，现在我们开始演示一下AppState的相关实例用法，具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  AppState,
  ToastAndroid,
} from 'react-native';

class AppStateDemo extends Component {
  constructor(props){
        super(props);
        this._handleAppStateChange = this.handleAppStateChange.bind(this);
        this.state = {
            _appState:AppState.currentState,
            _changeMessage:'',

        };
  }
  componentWillMount() {
     //ToastAndroid.show('挂载',ToastAndroid.SHORT);
     AppState.addEventListener('change', this._handleAppStateChange);
  }
  componentWillUnmount() {
     //ToastAndroid.show('取消挂载',ToastAndroid.SHORT);
     AppState.removeEventListener('change', this._handleAppStateChange);
  }
  handleAppStateChange(appState) {
      ToastAndroid.show('当前状态为:'+appState,ToastAndroid.SHORT);
  } 
  render() {
    return (
      
        当前App状态信息如下:
        
           {this.state._appState}
        
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('AppStateDemo', () => AppStateDemo);

运行截图如下:

查看图片

(七)AppState实例

今天我们主要讲解学习了AppState检查App前后、后台运行状态模块。大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（www.lcode.org/） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

查看图片

关注我的微博，可以获得更多精彩内容

avatar
文章
阅读
粉丝