如何从 React-Native 获取 onresume 事件？答案

【问题标题】：How do I get onresume event from React-Native?如何从 React-Native 获取 onresume 事件？
【发布时间】：2015-11-11 02:35:36
【问题描述】：

如何从 React-Native 获取 onresume 事件？我想检查一下 Android 主要活动何时恢复。我检查了RN的源代码，但是应用程序恢复时似乎没有任何事件。

【问题讨论】：

请提供更多信息
当用户按下主页按钮时，我想在使用回到我的应用程序时发出请求。
stackoverflow.com/a/33907794/229341 正好回答了这个问题
@PranavPrakash 我的意思是在 Android 中。但最近 Facebook 刚刚为 AppState 开源了新的 API。 Link
In React Native on iOS, is there a way to determine when an app is resumed? Such as an onResume event?的可能重复

标签： android react-native

【解决方案1】：

React Native 提供 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>
        );
      }

    }

来源：https://facebook.github.io/react-native/docs/appstate.html

【讨论】：

完美！这应该是选择的答案

【解决方案2】：

你可以使用 AppState
阅读本文档
https://facebook.github.io/react-native/docs/appstate.html

【讨论】：

我想知道“活动”的状态，而不是整个应用程序。像 onResume() Android 方法。我该怎么做？
以上链接已不存在

【解决方案3】：

每次用户返回此屏幕时都会调用此方法。

此方法与Android onResume() 方法相同。

 render() {
 this.props.navigation.addListener(
    'didFocus',
       payload => {
         console.log("Payload is called .....................")
        }
  );
}

【讨论】：

如何在其他函数中使用而不是render()？

【解决方案4】：

AppState.addEventListener('change', (nextAppState) => {
    if (nextAppState.match(/inactive|background/) && nextAppState === 'active') {
        console.log('App has come to the foreground! (iOS and Android)')
    }
});

【讨论】：

【解决方案5】：

我最终为此推出了自己的解决方案。实现起来真的非常简单。

确保您的所有活动都扩展同一个类，并在其中执行此操作：

import com.facebook.react.bridge.Arguments
import com.facebook.react.modules.core.DeviceEventManagerModule

override fun onResume() {
    super.onResume()

    val params = Arguments.createMap()
    params.putInt("rootViewTag", reactRootView!!.rootViewTag)
    val reactContext = reactRootView!!.reactInstanceManager!!.currentReactContext!!
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java).emit("androidActivityResumed", params)
}

然后，在 React 方面执行以下操作：

import {DeviceEventEmitter} from 'react-native'

class MyComp extends React.Component {
  componentDidMount() {
    DeviceEventEmitter.addListener('androidActivityResumed', this._onAndroidActivityResumed)
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeListener('androidActivityResumed', this._onAndroidActivityResumed)
  }

  _onAndroidActivityResumed = (e) => {
    if (e.rootViewTag === this.props.rootTag) {
      // Do whatever you want here
    }
  }
}

【讨论】：