1需求
在React Native中需要接收原生模块发出的事件来更新UI操作
2思路分析
iOS从原生向React Native发送Event会比Android复杂一些。 您无法获得直接获得EventEmitter的实例，并无法像在Android上那样轻松地使用它来发送消息。 您需要将RCTEventEmitter子类化，然后实现supportedEvents方法，该方法应返回受支持事件的数据。 之后您将可以使用sendEventWithName本身。
3实现
- 在桥接文件 bridging header 中引入
#import <React/RCTEventEmitter.h>
- 在你的 .m 执行文件中声明可调用的方法:
#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(RNSwiftExample, NSObject)
RCT_EXTERN_METHOD(doSomethingThatHasMultipleResults: (RCTResponseSenderBlock *)errorCallback)
@end
- 在需要发事件的原生模块中的类继承 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)
}
}
- 在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 )
},
}
- 也可以在其他的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
});
}
- 记住要取消监听
this.subscription.remove();
