AppStateIOS

AppStateIOS能告诉你应用当前是在前台还是在后台,并且能在状态变化的时候通知你。

AppStateIOS通常在处理推送通知的时候用来决定内容和对应的行为。

iOS App States#

  • active - 应用正在前台运行
  • background - 应用正在后台运行。用户既可能在别的应用中,也可能在桌面。
  • inactive - 这是一个过渡状态,发生在前后台切换时期,比如(双击HOME键)进入多任务窗口或是此时有来电。

要了解更多信息,可以阅读Apple的文档

基本用法#

要获取当前的状态,你可以使用AppStateIOS.currentState,这个变量会一直保持更新。不过在启动的过程中,currentState可能为null,直到AppStateIOS从原生代码得到通知为止。

getInitialState: function() {
  return {
    currentAppState: AppStateIOS.currentState,
  };
},
componentDidMount: function() {
  AppStateIOS.addEventListener('change', this._handleAppStateChange);
},
componentWillUnmount: function() {
  AppStateIOS.removeEventListener('change', this._handleAppStateChange);
},
_handleAppStateChange: function(currentAppState) {
  this.setState({ currentAppState, });
},
render: function() {
  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';

var React = require('react-native');
var {
  AppStateIOS,
  Text,
  View
} = React;

var AppStateSubscription = React.createClass({
  getInitialState() {
    return {
      appState: AppStateIOS.currentState,
      previousAppStates: [],
      memoryWarnings: 0,
    };
  },
  componentDidMount: function() {
    AppStateIOS.addEventListener('change', this._handleAppStateChange);
    AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
  },
  componentWillUnmount: function() {
    AppStateIOS.removeEventListener('change', this._handleAppStateChange);
    AppStateIOS.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 = 'AppStateIOS';
exports.description = 'iOS app background status';
exports.examples = [
  {
    title: 'AppStateIOS.currentState',
    description: 'Can be null on app initialization',
    render() { return <Text>{AppStateIOS.currentState}</Text>; }
  },
  {
    title: 'Subscribed AppStateIOS:',
    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
  },
  {
    title: 'Previous states:',
    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
  },
  {
    title: 'Memory Warnings',
    description: 'In the simulator, hit Shift+Command+M to simulate a memory warning.',
    render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; }
  },
];