React Native检测应用前台Hook出现NativeEventEmitter警告的排查与解决

算力阿峰

2026-8-17

React Native 0.69.4中AppState监听的NativeEventEmitter警告修复

警告原因

RN 0.69.x版本的官方AppState Native模块未实现removeListeners方法，当调用AppState.addEventListener（或addListener）时，内部创建的NativeEventEmitter会检查目标模块是否具备该方法，缺失时就会抛出你看到的警告。你的监听器移除逻辑本身是正确的，问题出在RN底层实现上。

修复方案

方案1：临时补全`removeListeners`方法

在项目入口文件（如App.tsx/index.js）中添加以下代码，给AppState模块补上空的removeListeners方法，绕过检查：

import { NativeModules } from 'react-native';

// 修复AppState的NativeEventEmitter警告
if (NativeModules.AppState && !NativeModules.AppState.removeListeners) {
  NativeModules.AppState.removeListeners = () => {};
}

方案2：调整监听代码（简化依赖）

可以简化useEffect的依赖（setIsForeground是useState返回的稳定函数，无需加入依赖），同时改用更贴合官方文档的AppState.addListener写法：

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

export const useIsForeground = (): boolean => {
  const [isForeground, setIsForeground] = useState(AppState.currentState === 'active');

  useEffect(() => {
    const onChange = (state: AppStateStatus): void => {
      setIsForeground(state === 'active');
    };
    const subscription = AppState.addListener('change', onChange);
    return () => subscription.remove();
  }, []);

  return isForeground;
};