iOS 原生Swift 向 React Native JS 发送事件

1需求

在React Native中需要接收原生模块发出的事件来更新UI操作

2思路分析

iOS从原生向React Native发送Event会比Android复杂一些。 您无法获得直接获得EventEmitter的实例，并无法像在Android上那样轻松地使用它来发送消息。 您需要将RCTEventEmitter子类化，然后实现supportedEvents方法，该方法应返回受支持事件的数据。 之后您将可以使用sendEventWithName本身。

3实现

1. 在桥接文件 bridging header 中引入

#import 

2. 在你的 .m 执行文件中声明可调用的方法:

#import 
@interface RCT_EXTERN_MODULE(RNSwiftExample, NSObject)
RCT_EXTERN_METHOD(doSomethingThatHasMultipleResults: (RCTResponseSenderBlock *)errorCallback)
@end

3. 在需要发事件的原生模块中的类继承 RCTEventEmitter
   在.swift文件中重载 RCTEventEmitter 的方法

@objc(RNSwiftExample)
class RNSwiftExample: RCTEventEmitter {
  
  // Returns an array of your named events
  override func supportedEvents() -> [String]! {
    return ["MyEvent"]
  }
  
  // Takes an errorCallback as a parameter so that you know when things go wrong.  
  // This will make more sense once we get to the Javascript
  @objc func doSomethingThatHasMultipleResults(
    _ errorCallback: @escaping RCTResponseSenderBlock) {
    
    
    let names = ["Anna", "Alex", "Brian", "Jack"]
    for name in names {
          // You send an event with your result instead of calling a callback
        self.sendEvent(withName: "MyEvent", body: name)
    }
  }

4. 在React Native中生成调用的方法

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

let {
    RNSwiftExample
} = NativeModules

module.exports = {
    emitter: new NativeEventEmitter( RNSwiftExample ),

    doSomethingThatHasMultipleResults( callback )
    {
        this.emitter.addListener(
            'MyEvent',
            name => callback( null, name )
        );

        RNSwiftExample.doSomethingThatHasMultipleResults( callback )
    },
}

5. 也可以在其他的JS模块中调用改方法，然后建立监听事件

import { NativeEventEmitter, NativeModules } from 'react-native';
let {
    RNSwiftExample
} = NativeModules
const emitter = new NativeEventEmitter(RNSwiftExample);

{
    this.subscription = emitter.addListener('MyEvent', (value)=>{
      console.warn("MyEvent",value);
      //update your UI
    });
}

6. 记住要取消监听

this.subscription.remove();