AppState
AppState
能告诉你应用当前是在前台还是在后台,并且能在状态变化的时候通知你。
AppState通常在处理推送通知的时候用来决定内容和对应的行为。
App States#
active
- 应用正在前台运行background
- 应用正在后台运行。用户既可能在别的应用中,也可能在桌面。inactive
- 此状态表示应用正在前后台的切换过程中,或是处在系统的多任务视图,又或是处在来电状态中。
要了解更多信息,可以阅读Apple的文档。
基本用法#
要获取当前的状态,你可以使用AppState.currentState
,这个变量会一直保持更新。不过在启动的过程中,currentState
可能为null,直到AppState
从原生代码得到通知为止。
constructor(props) {
super(props);
this.state = {
currentAppState: AppState.currentState,
};
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!')
}
this.setState({appState: nextAppState});
}
render() {
return (
<Text>Current state is: {this.state.currentAppState}</Text>
);
}
上面的这个例子只会显示"Current state is: active",这是因为应用只有在active
状态下才能被用户看到。并且null状态只会在一开始的一瞬间出现。
方法#
static addEventListener(type: string, handler: Function) #
添加一个监听函数,用于监听应用状态的变化。type参数应填
。change
static removeEventListener(type: string, handler: Function) #
移除一个监听函数。type参数应填change
。
属性#
currentState: TypeCastExpression #
例子#
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {
AppState,
Text,
View
} = ReactNative;
var AppStateSubscription = React.createClass({
getInitialState() {
return {
appState: AppState.currentState,
previousAppStates: [],
memoryWarnings: 0,
};
},
componentDidMount: function() {
AppState.addEventListener('change', this._handleAppStateChange);
AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
},
componentWillUnmount: function() {
AppState.removeEventListener('change', this._handleAppStateChange);
AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
},
_handleMemoryWarning: function() {
this.setState({memoryWarnings: this.state.memoryWarnings + 1});
},
_handleAppStateChange: function(appState) {
var previousAppStates = this.state.previousAppStates.slice();
previousAppStates.push(this.state.appState);
this.setState({
appState,
previousAppStates,
});
},
render() {
if (this.props.showMemoryWarnings) {
return (
<View>
<Text>{this.state.memoryWarnings}</Text>
</View>
);
}
if (this.props.showCurrentOnly) {
return (
<View>
<Text>{this.state.appState}</Text>
</View>
);
}
return (
<View>
<Text>{JSON.stringify(this.state.previousAppStates)}</Text>
</View>
);
}
});
exports.title = 'AppState';
exports.description = 'app background status';
exports.examples = [
{
title: 'AppState.currentState',
description: 'Can be null on app initialization',
render() { return <Text>{AppState.currentState}</Text>; }
},
{
title: 'Subscribed AppState:',
description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; }
},
{
title: 'Previous states:',
render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; }
},
{
platform: 'ios',
title: 'Memory Warnings',
description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
},
];
- 入门基础
- 进阶指南
- 社区资源
- 使用指南(iOS)
- 使用指南(Android)
- 组件
- ActivityIndicator
- Button
- DatePickerIOS
- DrawerLayoutAndroid
- FlatList
- Image
- KeyboardAvoidingView
- ListView
- ListView.DataSource
- Modal
- NavigatorIOS
- Picker
- PickerIOS
- ProgressBarAndroid
- ProgressViewIOS
- RefreshControl
- ScrollView
- SectionList
- SegmentedControlIOS
- Slider
- StatusBar
- Switch
- TabBarIOS
- TabBarIOS.Item
- Text
- TextInput
- ToolbarAndroid
- TouchableHighlight
- TouchableNativeFeedback
- TouchableOpacity
- TouchableWithoutFeedback
- View
- ViewPagerAndroid
- VirtualizedList
- WebView
- API
- ActionSheetIOS
- AdSupportIOS
- Alert
- AlertIOS
- Animated
- AppRegistry
- AppState
- AsyncStorage
- BackAndroid
- BackHandler
- CameraRoll
- Clipboard
- DatePickerAndroid
- Dimensions
- Easing
- Geolocation
- ImageEditor
- ImagePickerIOS
- ImageStore
- InteractionManager
- Keyboard
- LayoutAnimation
- Linking
- NativeMethodsMixin
- NetInfo
- PanResponder
- PermissionsAndroid
- PixelRatio
- PushNotificationIOS
- Share
- StyleSheet
- Systrace
- TimePickerAndroid
- ToastAndroid
- Vibration
- 布局样式属性
- 阴影样式属性