1需求

在React Native中需要接收原生模塊發(fā)出的事件來(lái)更新UI操作

2思路分析

iOS從原生向React Native發(fā)送Event會(huì)比Android復(fù)雜一些。 您無(wú)法獲得直接獲得EventEmitter的實(shí)例，并無(wú)法像在Android上那樣輕松地使用它來(lái)發(fā)送消息。 您需要將RCTEventEmitter子類(lèi)化，然后實(shí)現(xiàn)supportedEvents方法，該方法應(yīng)返回受支持事件的數(shù)據(jù)。 之后您將可以使用sendEventWithName本身。

3實(shí)現(xiàn)

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

#import <React/RCTEventEmitter.h>

2. 在你的 .m 執(zhí)行文件中聲明可調(diào)用的方法:

#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(RNSwiftExample, NSObject)
RCT_EXTERN_METHOD(doSomethingThatHasMultipleResults: (RCTResponseSenderBlock *)errorCallback)
@end

3. 在需要發(fā)事件的原生模塊中的類(lèi)繼承 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中生成調(diào)用的方法

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模塊中調(diào)用改方法，然后建立監(jiān)聽(tīng)事件

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. 記住要取消監(jiān)聽(tīng)

this.subscription.remove();