react-native – 如何使用React Native检测屏幕解锁？

FB上有3个状态,共有5个状态.我只在FB中看到3但其他2可能会或可能不会被支持.

活动 – 应用程序在前台运行

后台 – 该应用程序正在后台运行.用户在另一个应用程序或主屏幕上.

不活动 – 这是在前景和前景之间转换时发生的状态.背景,以及在不活动期间,例如进入多任务视图或来电时

查看苹果Docs了解更多相关信息.

当手机在锁屏中时,你将不得不测试什么状态.我不能告诉你什么状态使用,因为我从来没有测试过api.

从下面的代码中可以看出,测试是在条件语句中完成的

if (this.state.appState.match(/inactive|background/) && nextAppState === 'active')

我在这里以facebook为例,但在componentDidMount中附加更改事件列表器并在ComponentWillUnmount中删除,代码将运行到该状态.

import React,{Component} from 'react'
import {AppState,Text} from 'react-native'

class AppStateExample extends Component {

  state = {
    appState: 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.appState}</Text>
    );
  }

}