React-Native新版本RCTEventEmitter的使用（從原生髮送消息到JS）

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

參考：http://blog.csdn.net/pz789as/article/details/52837853

 

記得在0.27版本以前，RN的文檔裏面就告訴了咱們怎麼從Native端主動發消息到JS端，上面說的方式是這樣的：

 

[objc] view plain copy

1. @synthesize bridge = _bridge;  
2.   
3. -(void)iseCallback:(NSString*)code result:(NSString*) result  
4. {  
5.   [_bridge.eventDispatcher  
6.    sendDeviceEventWithName:@"iseCallback"  
7.    body:@{  
8.           @"code":code,  
9.           @"result":result,  
10.           @"index":self.bridgeIndex,  
11.           @"category":self.bridgeCategory  
12.           }];  
13. }  

 

而後JS那邊調用：

 

[javascript] view plain copy

1. import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';  
2.   
3. this.listener = myNativeEvt.addListener('iseCallback', this.iseCallback.bind(this));  
4.   
5. this.listener && this.listener.remove();  

 

 

直接使用bridge.eventDispatcher中的方法，裏面有三個，分別是：

 

sendAppEventWithName

sendDeviceEventWithName

sendInputEventWithName

而後在JS那邊也有三個對應的接收接口

RCTAppEventEmitter

RCTDeviceEventEmitter

RCTInputEventEmitter

雖然目前均可以使用，可是在xcode裏面一直提示這種方式可能要被取代：

'sendDeviceEventWithName:body:' is deprecated: Subclass RCTEventEmitter instead

而後文檔也沒見到新方式的例子。

 

到目前爲止，RN的 中文文檔 和 英文原文文檔 都沒有看到，因而就去RN的github上找答案，結果上面有人已經提了。作法是這樣的：

原生端修改：

一、自定義的模塊類頭文件要繼承自RCTEventEmitter

 

[objc] view plain copy

1. #import "RCTEventEmitter.h"  
2.   
3. @interface ChivoxISE : RCTEventEmitter<RCTBridgeModule>  

 

 

二、而後要導出你全部的方法名字

 

[objc] view plain copy

1. - (NSArray<NSString *> *)supportedEvents  
2. {  
3.   return @[@"iseCallback", @"iseVolume", @"playCallback"];//有幾個就寫幾個  
4. }  

三、分別實現你導出的全部方法，裏面都使用 sendEventWithName 方法便可

 

 

[objc] view plain copy

1. -(void)iseCallback:(NSString*)code result:(NSString*) result  
2. {  
3.   [self sendEventWithName:@"iseCallback"  
4.                      body:@{  
5.                             @"code": code,  
6.                             @"result": result,  
7.                             }];  
8. }  

四、最後JS端調用

 

 

[javascript] view plain copy

1. import {  
2.   ...  
3.   NativeModules,  
4.   NativeEventEmitter,  //導入NativeEventEmitter模塊  
5. } from 'react-native';  
6.   
7. var ChivoxISE = NativeModules.ChivoxISE;  
8. const myNativeEvt = new NativeEventEmitter(ChivoxISE);  //建立自定義事件接口  
9.   
10. //在組件中使用  
11.   componentWillMount() {  
12.     this.listener = myNativeEvt.addListener('iseCallback', this.iseCallback.bind(this));  //對應了原生端的名字  
13.   }  
14.   componentWillUnmount() {  
15.     this.listener && this.listener.remove();  //記得remove哦  
16.     this.listener = null;  
17.   }  

 

 

[javascript] view plain copy

1. iseCallback(data) {//接受原生傳過來的數據 data={code:,result:}          
2.     if (data.code == CB_CODE_RESULT) {  
3.         //  
4.     }  
5.     else {//..真的是未知的錯誤  
6.         logf('傳回其餘參數', data.result);  
7.     }  
8. }  

 

 

 

五、結束。O(∩_∩)O哈哈~