React Native中用JavaScript监听Swift原生模块事件

一、Swift端配置事件发送 #

• 让你的Swift原生模块继承RCTEventEmitter（而非普通的RCTBridgeModule）
• 必须重写supportedEvents()方法，返回需要发送的事件名称数组
• 使用sendEvent(withName:body:)方法触发事件并携带数据

import React

@objc(MyCustomModule)
class MyCustomModule: RCTEventEmitter {
    // 返回当前模块支持的事件列表
    override func supportedEvents() -> [String]! {
        return ["CustomEventFromSwift"]
    }

    // 模拟原生逻辑触发事件的场景，实际可在任意业务时机调用
    @objc func triggerEvent() {
        // 发送事件，body可携带任意可序列化数据
        sendEvent(withName: "CustomEventFromSwift", body: ["message": "Hello from Swift!", "code": 200])
    }

    // 声明模块是否需要在主线程初始化
    override static func requiresMainQueueSetup() -> Bool {
        return true
    }
}

注：RN 0.60+支持自动链接Swift模块，无需手动配置package.json；若使用低版本，需在AppDelegate.m中手动注册模块。

二、JavaScript端监听事件 #

• 从react-native导入NativeEventEmitter和你的原生模块
• 创建NativeEventEmitter实例并传入目标模块
• 调用addListener绑定事件回调，组件卸载时记得移除监听避免内存泄漏

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

const { MyCustomModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyCustomModule);

// 监听Swift发来的事件
const eventListener = eventEmitter.addListener(
  'CustomEventFromSwift',
  (eventData) => {
    console.log('收到原生事件:', eventData);
    // 此处处理事件数据，如更新UI、执行业务逻辑
  }
);

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

// 可主动调用原生方法测试事件触发
// MyCustomModule.triggerEvent();

关键注意事项 #

• Swift模块的@objc(MyCustomModule)指定的名称必须和JS中NativeModules.MyCustomModule的名称完全一致
• 事件携带的body需为可序列化类型（字符串、数字、数组、字典等），RN会自动转换为JS对应类型
• 若需在后台触发事件，需确保原生模块拥有对应后台权限，且事件发送逻辑尽量放在主线程执行（可通过DispatchQueue.main.async实现）

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