如何定位React Native应用中触发LogBoxData.js相关NativeEventEmitter警告的依赖库

精确定位触发警告的具体依赖的方法 #

不需要盲升所有依赖，可通过以下3种方式快速定位触发源：

• 重写console.warn打印完整调用堆栈：在项目入口文件（如index.js）的所有import代码之前添加如下代码，触发警告时会输出完整的调用链路，包含第三方依赖的具体文件路径，避免被LogBox吞掉上游栈信息：

const originalWarn = console.warn;
console.warn = (...args) => {
  if (args[0]?.includes('new NativeEventEmitter() was called with a non-null argument without the required addListener method')) {
    originalWarn(...args);
    console.log('警告完整调用堆栈：', new Error().stack);
  }
  originalWarn(...args);
};

• 调试模式断点定位：开启RN远程调试模式，找到node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js文件，在构造函数内添加条件断点，触发警告时直接查看调试器的调用栈面板，可直接定位到上层调用代码位置。
• 常见触发依赖核对：目前已知旧版本的以下依赖会触发该警告，可先核对package.json中的版本快速验证：
  • @react-native-community/netinfo < 5.9.0
  • react-native-reanimated < 2.0.0
  • react-native-screens < 3.0.0
  • 各类2021年之前发布的原生SDK封装类第三方库

根因修复方案 #

• 若触发源为第三方依赖：升级对应依赖到官方最新稳定版即可，主流库均已在后续版本修复该兼容问题；若为未维护的小众库，可自行在对应依赖的原生模块导出位置补全addListener、removeListeners两个方法，或向仓库提交修复PR。
• 若触发源为自有封装的原生模块：给原生模块导出对象补全对应方法即可，示例如下：

import { NativeModules } from 'react-native';
const CustomNativeModule = NativeModules.CustomNativeModule;
// 补全缺失方法
CustomNativeModule.addListener = () => {};
CustomNativeModule.removeListeners = () => {};
export default CustomNativeModule;

内容的提问来源于stack exchange，提问作者rsn