Android、IOS主動發(fā)事件給React Native

IOS(Swift版本)

//RNEventEmitter.m

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(RNEventEmitter, NSObject)
@end
//RNEventEmitter.swift
import Foundation

@objc(RNEventEmitter)
class RNEventEmitter: RCTEventEmitter {
    
    //提供出EventName
    override func supportedEvents() -> [String]! {
        return ["UnReadMsgCountEvent"]
    }

    override func startObserving() {
        NotificationCenter.default.addObserver(self, selector: #selector(emitEventInternal(_:)), name: NSNotification.Name(rawValue: "event-emitted"), object: nil)
    }
    
    override func stopObserving() {
        NotificationCenter.default.removeObserver(self)
    }
    
    func emitEventInternal(_ notification: NSNotification)  {
        let eventName: String = notification.userInfo?["eventName"] as! String
        print("send event to RN: \(self.bridge) \(eventName) \(notification.userInfo)")
        self.sendEvent(withName: eventName, body: notification.userInfo)
    }

    @objc func notifiyRN(_ eventName: String, parameters: [String: Any] = [:] ) {
        var newParams: [String: Any] = parameters
        newParams["eventName"] = eventName
        NotificationCenter.default.post(name: NSNotification.Name(rawValue: "event-emitted"), object: self, userInfo: newParams)
    }
}
import {
  NativeEventEmitter,
  NativeModules
} from 'react-native'

....
componentDidMount(){
    const { RNEventEmitter } = NativeModules
    const eventEmitter = new NativeEventEmitter(RNEventEmitter);
    this.emitter = eventEmitter.addListener("UnReadMsgCountEvent", (data) => {
      console.log("ios 收到通知了:內(nèi)容是:", data && data.unReadMsgCount)
    });
}
 componentWillUnmount() {
    this.emitter.remove();
  }
....
RNEventEmitter().notifiyRN("UnReadMsgCountEvent", parameters: ["unReadMsgCount": number]) })

IOS中使用RCTEventEmitter, 直接調(diào)用方法self.sendEvent(..)無效,RN會收不到事件. self.sendEvent(..)底層調(diào)用的self.bridge enqueueJSCall.會發(fā)現(xiàn)bridge = nil. 這里有個坑. 我們應(yīng)該使用加載RN自構(gòu)建的實例. 一種解決辦法是在startObserving在給實例添加通知.實際調(diào)用發(fā)送事件事件時候,觸發(fā)通知. 另外一種辦法實現(xiàn)該類的單例.

Android

 WritableMap map = Arguments.createMap();
        map.putInt("unReadMsgCount", badgeCount);
        getReactInstanceManager().getCurrentReactContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("UnReadMsgCountEvent", map);
import {
  DeviceEventEmitter
} from 'react-native'
...
componentDidMount(){
  this.emitter = DeviceEventEmitter.addListener("UnReadMsgCountEvent",(data) => {
        console.log("android 收到通知了:內(nèi)容是: ", data && data.unReadMsgCount);
        this.updateMailBoxBadge(data)
      })
}

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

參考:
1、RCTEventEmitter bridge is not set
2、ReactNative之EventEmitter

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容