有时我们需要知道应用当前的运行状态,这样我们可以根据不同的状态进行相应的操作。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);