返回 导航

React / React Native

hangge.com

React Native - 使用AppState获取App运行状态(以及监听状态改变事件)

作者:hangge | 2017-03-28 08:10
有时我们需要知道应用当前的运行状态,这样我们可以根据不同的状态进行相应的操作。React Native 提供了 AppState 来告知我们 App 当前的状态:激活(前台运行中)、还是后台运行。甚至可以通知我们状态的改变。下面分别对这两种情况进行介绍。

1,主动获取当前应用状态

我们可以使用 AppState.currentState 来获取应用的状态,返回值如下:
  • active:前台运行中
  • background:后台运行中
  • inactive:运行的过渡状态
(1)效果图
点击按钮后,将当前状态显示出来。

(2)样例代码
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AppState
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.getCurrentState.bind(this)}>
           获取当前状态
         </Text>
        </View>
      );
   }

   //获取当前状态
   getCurrentState() {
     alert("当前状态:" + AppState.currentState)
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('HelloWorld', () => App);

2,监听状态的变化

我们可以在代码中添加相关的事件监听:
  • AppState.addEventListener:用于添加事件监听
  • AppState.removeEventListener:用于删除事件监听
(1)效果图
程序启动后会自动监听状态改变事件、以及内存报警事件。按 home 键将 App 退到后台,接着再回到前台运行可以看到效果。
         

(2)样例代码
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AppState
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   componentWillMount() {
      //监听状态改变事件
      AppState.addEventListener('change', this.handleAppStateChange);
      //监听内存报警事件
      AppState.addEventListener('memoryWarning', function(){
        console.log("内存报警....");
      });
   }

   componentWillUnmount() {
      //删除状态改变事件监听
      AppState.removeEventListener('change', this.handleAppStateChange);
   }

   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item}>监听中...</Text>
        </View>
      );
   }

   //状态改变响应
   handleAppStateChange(appState) {
      alert('当前状态为:'+appState);
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('HelloWorld', () => App);

评论

全部评论(0)

回到顶部