React native 如何在react native中为AppState使用模糊事件

我需要一个关于如何使用'blur'事件来响应本机AppState的示例。当应用程序未处于焦点时，我尝试响应，例如，当用户拉动通知抽屉，但我不断收到错误消息

不变违规：尝试订阅未知事件：“blur”

根据官方react本机文档中提到的文档，有以下三种状态支持：

活动-应用程序正在前台运行

后台-应用程序正在后台运行。用户是： 在另一个应用程序中 在主屏幕上 [Android]在另一个活动上（即使它是由您的应用程序启动的）

[iOS]不活动-这是在前台和后台之间转换时，以及在进入多任务视图或来电等不活动期间发生的状态

由于不存在模糊这样的状态，因此您将面临一个错误，即无法找到此类事件

编辑

您必须将blur注册为组件生命周期中的事件，但在注册blur事件之前，您必须谨慎，并且必须确定平台，因为它仅在android中可用，而在ios中不可用

要注册事件，您必须执行以下操作：

import React from 'react';
import {AppState} from 'react-native';
class HandlingEvents extends React.Pure.Component {
    constructor(props) {
        super(props)
        // your state goes here...
    }
    componentDidMount() {
        // your event will be registered here, when your component is mounted on // the screen. 
        // Be cautious here, make a platform check here so as to avoid discrepancies in ios devices
        AppState.addEventListener('blur',this.handleBlurState)
    }
    componentWillUnMount() {
        // your event will be removed here, when your component gets unmounted from the screen.
        // Be cautious here, make a platform check here so as to avoid discrepancies in ios devices
        AppState.removeEventListener('blur',this.handleBlurState)
    }
    handleBlurState = (nextAppState) => {
        //this method will contain your entire logic, as to how you want to treat your component in this event.
        // As per the docs, since the state of your app will not changed, therefore you can continue your logic here by checking if the state of your app is **change** or not..
        if (AppState.currentState === "active" && nextAppState === "active") {
            //whatever task you want to perform here..;
        }
    }
}

---

根据与提交相关联的标签，这个特性在（）中登陆，看起来只有从0.61开始才可用，并且还没有登陆到一个稳定的版本中。确保运行的是0.61.0-rc.0或更高版本。

根据。Blur是[仅限安卓]

“[仅限Android]在用户未主动与应用程序交互时收到。在用户拉下通知抽屉的情况下非常有用。AppState不会更改，但会触发模糊事件。”

如果您仍然想在android上使用它，您可以在仅适用于android的条件下使用它

import { Platform } from "react-native";

........

 componentDidMount() {
    if (Platform.OS === "android") {
      AppState.addEventListener("blur", this._handleAppStateBlur);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === "android") {
      AppState.removeEventListener("blur", this._handleAppStateBlur);
    }
  }

  _handleAppStateBlur = () => {
    console.log("blur");
  };

---

嘿，阿努斯·卡利姆，请理解我的意思。我说的是

事件

不是

状态

。页面上列出了三个事件

change

、

focus

和

blur

。常见的是

change

，但我想使用

blur

作为描述谢谢@AnusKaleem@azondo的评论解释了挑战是什么。谢谢@MehranKhan，但我已经尝试过这种方法，但我得到了错误：

不变冲突：尝试订阅未知事件：“blur”

。我想@azundo的评论可以解释这一点。谢谢@azundo。我目前正在运行RN版本0.59。10@chukwuma-你找到解决办法了吗？我正在运行react native v0.59.8，并且面临着类似的挑战。您好@KeshavSharma，此功能似乎仅在RN0.61上可用。请看接受的答案。Thanks@chukwuma-我知道它将在RN0.61中提供。我想知道你是否能够处理通知抽屉拉入RN 0.59.10？还没有@KeshavSharma，我尝试的方法都不起作用。