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