如何在 iOS 上的 Turbo 模块中发出事件

Question

我正在按照此处的指南在 React Native 中创建 Turbo 模块。 https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules

如何在 iOS 上发出事件？该文档仅显示如何从 React 调用本机函数，而不显示如何从 Turbo 模块发出事件。

对于 Android，您将获得一个ReactApplicationContext对象，它允许您使用上下文对象创建像这样的发射器。

private val emitter = context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
emitter.emit(eventName, eventArray)

你如何在 iOS 上做同样的事情？

Answer 1

要从 iOS 向 RN 发送事件，您应该创建自己的发射器类，该发射器类继承自RCTEventEmitter，然后在 JS 端使用以下命令初始化它NativeEventEmitter，并使用以下命令添加所需事件的侦听器addListener：

事件发射器.h

#import <React/RCTEventEmitter.h>

@interface EventEmitter : RCTEventEmitter

+ (instancetype)shared;

@end

事件发射器.m

#import "EventEmitter.h"

// Events
static NSString* onMyEvent = @"onMyEvent";

// Variable to save the instance
static EventEmitter* eventEmitter = nil;

@implementation EventEmitter

/// Exposing "EventEmitter" name to RN
RCT_EXPORT_MODULE(EventEmitter);

// Called from RN
- (instancetype)init {
  if (self = [super init]) {
    eventEmitter = self;
  }
  return self;
}

+ (BOOL)requiresMainQueueSetup {
    return NO;
}

+ (instancetype)shared {
  return eventEmitter;
}

// List of supported events
- (NSArray<NSString *> *)supportedEvents {
  return @[onMyEvent];
}

@end

如何致电：

NSDictionary* body = @{@"message" : @"Hello Emitter!"};
[EventEmitter.shared sendEventWithName:@"onMyEvent" body:body];

注册护士/JS

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

class EventHandler extends React.Component {
  eventsSubscription: EmitterSubscription;

  componentDidMount() {
    const eventEmitter = new NativeEventEmitter(NativeModules.EventEmitter);

    this.eventsSubscription = eventEmitter.addListener('onMyEvent', event => {
      console.log(event.message); // Prints "Hello Emitter!"
    });
  }

  componentWillUnmount() {
    this.eventsSubscription.remove();
  }

  ...
};