iOS平台如何在React Native Turbo Module中发送事件？

在iOS的React Native新架构Turbo Module中，发送事件的核心是借助RCTEventEmitter类，以下是具体实现步骤和代码示例：

1. Objective-C版本实现 #

让你的Module类继承RCTEventEmitter并遵循RCTTurboModule协议，同时实现必要方法：

头文件（.h） #

#import <React/RCTEventEmitter.h>
#import <React/RCTTurboModule.h>

@interface MyCustomTurboModule : RCTEventEmitter <RCTTurboModule>

@end

实现文件（.m） #

#import "MyCustomTurboModule.h"

@implementation MyCustomTurboModule

// 注册Module，确保React Native能识别
RCT_EXPORT_MODULE()

// 返回当前Module支持的所有事件名称数组
- (NSArray<NSString *> *)supportedEvents {
  return @[@"CustomEventTriggered"];
}

// 自定义方法：用于发送事件，可根据业务逻辑调用
- (void)sendEventToJSWithData:(NSDictionary *)eventData {
  // 发送事件到JS层
  [self sendEventWithName:@"CustomEventTriggered" body:eventData];
}

@end

2. Swift版本实现 #

如果使用Swift开发Turbo Module，代码如下：

import React

@objc(MyCustomTurboModule)
class MyCustomTurboModule: RCTEventEmitter, RCTTurboModule {
    // 指定Module名称
    static func moduleName() -> String! {
        return "MyCustomTurboModule"
    }

    // 返回支持的事件列表
    override func supportedEvents() -> [String]! {
        return ["CustomEventTriggered"]
    }

    // 自定义发送事件的方法
    @objc func sendEventToJSWithData(_ eventData: [String: Any]) {
        sendEvent(withName: "CustomEventTriggered", body: eventData)
    }
}

3. JS层监听事件 #

在React Native的JS代码中，通过NativeEventEmitter监听原生发送的事件：

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

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

// 订阅事件
const eventSubscription = eventEmitter.addListener(
  'CustomEventTriggered',
  (eventData) => {
    console.log('收到原生事件:', eventData);
    // 处理事件逻辑
  }
);

// 组件卸载时记得取消订阅，避免内存泄漏
// useEffect(() => {
//   return () => {
//     eventSubscription.remove();
//   };
// }, []);

关键说明 #

• iOS端的sendEventWithName:body:（Obj-C）/sendEvent(withName:body:)（Swift）对应Android端的emitter.emit方法，作用是将事件数据传递到JS层。
• 必须实现supportedEvents方法返回事件名称列表，否则JS层无法监听到事件。

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