RN 的EventEmitter 双向通信

React Native 的EventEmitter 双向通信本质是JS 和 Native 之间通过事件机制互相通知。它和普通 Native Module 方法调用不同Native ModuleJS 主动调用 NativeEventEmitterNative 和 JS 都可以主动发送事件通信模型JS | | emit / addListener | React Native Bridge | | Native一、JS → Native主动调用这个不是 EventEmitter 最典型场景一般用 Native Module。例如JSNativeModules.DeviceModule.start();NativeReactMethod public void start(){ //执行原生逻辑 }流程JS | Bridge | Native Module | Java/Kotlin二、Native → JSEventEmitter这是 EventEmitter 最常见用途。例如Android 检测到蓝牙状态变化GPS变化推送消息传感器数据NativesendEvent( onLocationChanged, params );JS监听DeviceEventEmitter.addListener( onLocationChanged, data{ console.log(data); } );流程Android | emit事件 | Bridge | JS Listener三、Android实现 EventEmitter1. Native Module继承public class DeviceModule extends ReactContextBaseJavaModule { private ReactApplicationContext context; public DeviceModule( ReactApplicationContext context ){ super(context); this.contextcontext; } Override public String getName(){ return DeviceModule; } }2. 发送事件private void sendEvent( String eventName, WritableMap params ){ context .getJSModule( DeviceEventManagerModule.RCTDeviceEventEmitter.class ) .emit( eventName, params ); }这里RCTDeviceEventEmitter就是 RN 的事件桥。3. 调用比如WritableMap data Arguments.createMap(); data.putString( message, hello JS ); sendEvent( DeviceEvent, data );四、JS监听RN 新版本推荐import { NativeEventEmitter, NativeModules } from react-native; const { DeviceModule }NativeModules; const emitter new NativeEventEmitter(DeviceModule); const subscription emitter.addListener( DeviceEvent, data{ console.log(data); } );取消监听subscription.remove();否则容易Memory Leak五、JS → Native事件如果 JS 想发事件给 Native例如JS:DeviceEventEmitter.emit( Login, { user:Tom } );但是Native 默认不能直接监听 JS EventEmitter。通常做法JS调用Native ModuleNativeModules.UserModule.login( { user:Tom } );Native:ReactMethod public void login( ReadableMap data ){ }也就是说JS --- Native 推荐: Native Module 不是 EventEmitter六、完整双向模型JS NativeEventEmitter ↑ | Native --- JS emit事件 ↓ Native Module ↑ JS --- Native method调用 Native七、实际项目例子扫码JS启动扫码Scanner.start();↓NativestartCamera();↓扫码成功emit( ScanResult, { code:123456 } );↓JSscannerEmitter.addListener( ScanResult, (result){ console.log(result.code); });八、RN 新架构TurboModule旧架构JS | Bridge | EventEmitter | Native新架构JS | JSI | TurboModule | Native事件通常使用TurboModuleEventEmitter interfaceCodegen例如TypeScript:export interface Spec extends TurboModule { readonly onChange: EventEmitterstring; }Codegen 自动生成绑定。总结方向推荐方式JS调用NativeNative ModuleNative通知JSNativeEventEmitter持续数据流EventEmitter一次请求返回Promise/Callback新架构TurboModule EventEmitter实际开发中蓝牙状态推送GPSNFC扫码原生播放器状态基本都是JS调用Native启动 ↓ Native持续emit事件 ↓ JS监听更新UI这就是 RN EventEmitter 最典型的双向通信模式。