React Native Android端AppState的blur与focus事件无法触发问题求解

问题根因 #

• React Native 0.63及更早版本的Android端未实现blur、focus两类AppState事件，仅支持active、background两种状态的change事件，所以你绑定的监听逻辑本身就不会被触发。
• 下拉通知栏的场景不会让App进入后台状态，RN旧版本默认的AppState监听逻辑没有覆盖这种App可见但失去操作焦点的场景，也没有对应的事件抛出。
• Expo对应RN 0.63版本的SDK继承了官方的这个缺陷，所以可以稳定复现问题。

修复方案 #

方案1：升级React Native版本 #

升级到0.64及以上版本即可，官方在这一版本补全了Android端blur、focus事件的适配，下拉通知栏、弹出系统权限弹窗等App失焦场景都会正常触发对应事件，原有绑定监听的代码不需要修改即可生效。

方案2：低版本原生补丁（无法升级时使用） #

如果业务依赖限制不能升级RN版本，可以通过原生扩展自定义事件实现需求：

1. Android原生层监听Activity的onWindowFocusChanged生命周期回调，当窗口获得/失去焦点时，分别发送android_app_focus、android_app_blur事件到JS层。
2. JS层封装自定义监听hooks替换原有AppState监听，示例代码如下：

import { DeviceEventEmitter, Platform, useEffect } from 'react-native';

const useAndroidAppFocus = (onBlur, onFocus) => {
  useEffect(() => {
    if (Platform.OS !== 'android') return;
    const blurSub = DeviceEventEmitter.addListener('android_app_blur', onBlur);
    const focusSub = DeviceEventEmitter.addListener('android_app_focus', onFocus);
    return () => {
      blurSub.remove();
      focusSub.remove();
    };
  }, [onBlur, onFocus]);
};

// 业务侧使用
const onBlur = () => {
  console.log('blur is working')
}
const onFocus = () => {
  console.log('focus is working')
}
useAndroidAppFocus(onBlur, onFocus);

临时替代方案 #

如果不想修改原生代码，暂时可以监听change事件实现基础的前后台状态判断，仅能覆盖App切后台的场景，无法覆盖下拉通知栏的失焦场景：

import { AppState, useEffect } from 'react-native';

useEffect(() => {
  const sub = AppState.addEventListener('change', (state) => {
    if (state === 'active') {
      console.log('App进入前台')
    } else if (state === 'background') {
      console.log('App进入后台')
    }
  });
  return () => sub.remove();
}, [])

内容的提问来源于stack exchange，提问作者Иван Кайн