版權聲明:本文爲博主原創文章,未經博主容許不得轉載。javascript
參考:http://blog.csdn.net/pz789as/article/details/52837853html
記得在0.27版本以前,RN的文檔裏面就告訴了咱們怎麼從Native端主動發消息到JS端,上面說的方式是這樣的:java
[objc] view plain copyreact
- @synthesize bridge = _bridge;
-
- -(void)iseCallback:(NSString*)code result:(NSString*) result
- {
- [_bridge.eventDispatcher
- sendDeviceEventWithName:@"iseCallback"
- body:@{
- @"code":code,
- @"result":result,
- @"index":self.bridgeIndex,
- @"category":self.bridgeCategory
- }];
- }
而後JS那邊調用:ios
[javascript] view plain copygit
- import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
-
- this.listener = myNativeEvt.addListener('iseCallback', this.iseCallback.bind(this));
-
- this.listener && this.listener.remove();
直接使用bridge.eventDispatcher中的方法,裏面有三個,分別是:github
sendAppEventWithNamereact-native
sendDeviceEventWithNamexcode
sendInputEventWithNameapp
而後在JS那邊也有三個對應的接收接口
RCTAppEventEmitter
RCTDeviceEventEmitter
RCTInputEventEmitter
雖然目前均可以使用,可是在xcode裏面一直提示這種方式可能要被取代:
'sendDeviceEventWithName:body:' is deprecated: Subclass RCTEventEmitter instead
而後文檔也沒見到新方式的例子。
到目前爲止,RN的 中文文檔 和 英文原文文檔 都沒有看到,因而就去RN的github上找答案,結果上面有人已經提了。作法是這樣的:
原生端修改:
一、自定義的模塊類頭文件要繼承自RCTEventEmitter
[objc] view plain copy
- #import "RCTEventEmitter.h"
-
- @interface ChivoxISE : RCTEventEmitter<RCTBridgeModule>
二、而後要導出你全部的方法名字
[objc] view plain copy
- - (NSArray<NSString *> *)supportedEvents
- {
- return @[@"iseCallback", @"iseVolume", @"playCallback"];//有幾個就寫幾個
- }
三、分別實現你導出的全部方法,裏面都使用 sendEventWithName 方法便可
[objc] view plain copy
- -(void)iseCallback:(NSString*)code result:(NSString*) result
- {
- [self sendEventWithName:@"iseCallback"
- body:@{
- @"code": code,
- @"result": result,
- }];
- }
四、最後JS端調用
[javascript] view plain copy
- import {
- ...
- NativeModules,
- NativeEventEmitter, //導入NativeEventEmitter模塊
- } from 'react-native';
-
- var ChivoxISE = NativeModules.ChivoxISE;
- const myNativeEvt = new NativeEventEmitter(ChivoxISE); //建立自定義事件接口
-
- //在組件中使用
- componentWillMount() {
- this.listener = myNativeEvt.addListener('iseCallback', this.iseCallback.bind(this)); //對應了原生端的名字
- }
- componentWillUnmount() {
- this.listener && this.listener.remove(); //記得remove哦
- this.listener = null;
- }
[javascript] view plain copy
- iseCallback(data) {//接受原生傳過來的數據 data={code:,result:}
- if (data.code == CB_CODE_RESULT) {
- //
- }
- else {//..真的是未知的錯誤
- logf('傳回其餘參數', data.result);
- }
- }
五、結束。O(∩_∩)O哈哈~