Android原生向React Native传递数据的技术实现问询

你的这个原生（Android）向React Native JS端发送事件的方案方向是完全正确的，这是React Native官方推荐的原生与JS单向通信（原生主动通知JS）的实现方式之一。下面我会帮你拆解代码的正确性、潜在问题以及优化建议：

Java端代码的正确性与注意事项 #

你的代码逻辑完全符合RN的通信规范，不过有几个细节需要留意：

• 核心逻辑没问题：通过Arguments.createMap()创建参数容器、存入字符串参数，再借助DeviceEventManagerModule.RCTDeviceEventEmitter的emit方法发送showResult事件，这是原生向JS发事件的标准流程。
• 必须导入的依赖类：

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

• 代码执行环境：这段代码必须在继承自ReactContextBaseJavaModule的自定义RN模块类中运行，或者能获取到有效的ReactApplicationContext实例（普通Android Context无法使用）。
• 线程安全：如果是在子线程中触发事件发送，一定要切换到RN主线程执行，否则会抛出异常：

  getReactApplicationContext().runOnUiThread(() -> {
      WritableMap params = Arguments.createMap();
      params.putString("arg1","valueToJS");
      getReactApplicationContext()
          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
          .emit("showResult", params);
  });
  

JavaScript端代码的修正与优化 #

你的代码思路没问题，但有几个小问题需要调整，同时给你更规范的实现方案：

1. 类型标注错误：Event类型并不匹配原生传递的参数结构，应该对应原生发送的WritableMap，在TypeScript里可以定义为{ arg1: string }或Record<string, any>。
2. API选择建议：DeviceEventEmitter是旧版API，RN 0.60+更推荐使用NativeEventEmitter（结合自定义原生模块实例），不过DeviceEventEmitter仍可正常工作，但要注意内存泄漏问题。
3. 必须清理监听器：在组件中使用时，一定要在组件卸载时移除监听器，避免内存泄漏。

修正后的JS/TS代码示例 #

方式1：兼容旧版本的DeviceEventEmitter实现

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

// 在函数组件中注册监听器
useEffect(() => {
  const subscription = DeviceEventEmitter.addListener('showResult', (params: { arg1: string }) => {
    // 处理事件逻辑，比如打印参数
    console.log('收到原生传递的数据:', params.arg1);
  });

  // 组件卸载时移除监听器
  return () => {
    subscription.remove();
  };
}, []);

方式2：推荐的NativeEventEmitter规范实现

首先需要在自定义原生模块中确保支持事件发送，然后在JS端：

import { NativeEventEmitter, NativeModules } from 'react-native';
import { useEffect } from 'react';

// 假设你的自定义原生模块名为CustomModule
const eventEmitter = new NativeEventEmitter(NativeModules.CustomModule);

useEffect(() => {
  const subscription = eventEmitter.addListener('showResult', (params: { arg1: string }) => {
    console.log('收到原生传递的数据:', params.arg1);
  });

  return () => {
    subscription.remove();
  };
}, []);

常见问题排查 #

1. 事件接收不到：
   • 检查事件名称是否完全一致（showResult大小写敏感）；
   • 确认ReactApplicationContext实例有效，不为null；
   • 如果在子线程发送事件，必须切换到RN主线程。
2. 参数解析错误：
   • 确保原生传递的参数类型与JS端预期一致，比如原生putString对应JS字符串，putInt对应JS数字等。
3. 内存泄漏：
   • 务必在组件卸载时移除监听器，否则会导致组件无法被垃圾回收。

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