如何知道我的应用何时聚焦或不聚焦——反应原生？答案

【问题标题】：How to know, when did my app focused or unfocused- react native?如何知道我的应用何时聚焦或不聚焦——反应原生？
【发布时间】：2019-10-29 09:18:54
【问题描述】：

我正在开发一个 react-native 应用程序。

在其中一个屏幕中，有一个按钮，单击该按钮会向用户发送一封电子邮件，并打开默认电子邮件应用程序。

现在，电子邮件包含一个链接，点击该链接，用户将返回我的应用程序。

我如何知道用户已经从电子邮件应用程序返回到我的应用程序？

React 生命周期方法，例如：

componentDidMount 和componentDidUpdate

不工作。

【问题讨论】：

标签： ios react-native

【解决方案1】：

您需要的是应用的当前状态。然后你可以使用AppState解决它。

AppState可以告诉你应用是在前台还是后台，并在状态改变时通知你。

AppState 经常用于确定处理推送通知时的意图和正确行为。

示例

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>;
  }
}

【讨论】：

【解决方案2】：

您可以尝试使用 AppState API：https://facebook.github.io/react-native/docs/appstate。

AppState 可以告诉你应用是在前台还是后台，并在状态发生变化时通知你。

active - 应用正在前台运行。

background - 应用在后台运行。

[iOS] 不活动 - 这是在前台和后台之间转换时以及在不活动期间（例如进入多任务视图或来电时）出现的状态。 p>

我用它来恢复和停止应用中的背景音乐。

这是苹果官方文档的链接：https://developer.apple.com/documentation/uikit/app_and_environment/managing_your_app_s_life_cycle

【讨论】：