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状态只会在一开始的一瞬间出现。

方法#

属性#

例子#

'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} />; }
  },
];