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

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

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

 

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

 

[objc] view plain copyreact

  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那邊調用:ios

 

[javascript] view plain copygit

  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中的方法,裏面有三個,分別是: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

  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哈哈~

相關文章
相關標籤/搜索