React Native 与 原生交互
React Native 与原生交互一般有三种方式，分别是Callback,Promise,RCTDeviceEventEmitter
本文所有代码片段基于
React Native
"react": "16.0.0-alpha.6",
"react-native": "0.43.3"
iOS
Xcode 8.2.1
iOS 10.3
Callback 方式
Native 端
创建一个Cocoa Touch Class 文件 继承 RCTBridgeModule协议
.h文件
#import <React/RCTBridgeModule.h>
@interface MyModule : NSObject<RCTBridgeModule>
@end
.m文件
#import "MyModule.h"
@implementation MyModule
//将当前对象暴露给ReactNative 可以访问
RCT_EXPORT_MODULE();
//对React Native提供调用方法,Callback
RCT_EXPORT_METHOD(testCallbackEvent:(NSString *)event callback:(RCTResponseSenderBlock)callback)
{
NSLog(@"%@",event);
NSString *callbackData = @"Callback数据"; //准备回调回去的数据
callback(@[[NSNull null],callbackData]);
}
Native 端通过RCTBridgeModule协议，使用上面的代码实现了对象、方法的声明，将自身暴露给React Native
React Native 端
在需要使用到Native 类的js页面中。导入NativeModules
import NativeModules from 'react-native'
var MyModule = NativeModules.MyModule;
在js对象中使用
<Text style={styles.welcome} onPress={()=>this.callBackEvent()}>点击调原生+回调</Text>
callBackEvent (){
MyModule.testCallbackEvent(('RN->原生的数据'),(error, events) => {
if (error) {
console.error(error);
} else {
alert(events)//返回的数据
}
})
}
以上是Callback方式。
Promise 方式
Native 端
RCT_REMAP_METHOD(testPromisesEvent,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSString *PromisesData = @"Promises数据"; //准备回调回去的数据
if (PromisesData) {
resolve(PromisesData);
} else {
NSError *error=[NSError errorWithDomain:@"我是Promise回调错误信息..." code:101 userInfo:nil];
reject(@"no_events", @"There were no events", error);
}
}
React Native 端
<Text style={styles.welcome} onPress={()=>this.promisesEvent()}>Promises</Text>
//Promise回调
async promisesEvent(){
MyModule.testPromisesEvent().then((events)=>{
alert(events+1111)
}).catch((e)=>{
console.error(e);
})
}
RCTDeviceEventEmitter 方式
RCTDeviceEventEmitter 类似于iOS中的通知NSNotificationCenter。
Native 端
.h
#import <React/RCTEventEmitter.h>
@interface OCNativeEvent : RCTEventEmitter<RCTBridgeModule>
@end
.m
#import "OCNativeEvent.h"
@implementation OCNativeEvent
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents
{
return @[@"showAlertCallback"];//导出你的方法，数组结构。
}
-(void)showAlertCallback:(NSString*)code result:(NSString*) result
{
[self sendEventWithName:@"showAlertCallback"
body:@{
@"code": code,
@"result": result,
}];
}
@end
React Native 端
import NativeModules from 'react-native'
import NativeEventEmitter from 'react-native';
componentWillMount() {
myNativeEvt.emit('showAlertCallback',value);
this.listener = myNativeEvt.addListener('showAlertCallback', this.showAlertCallback.bind(this)); //对应了原生端的名字
}
componentWillUnmount() {
this.listener && this.listener.remove(); //记得remove哦
this.listener = null;
}
showAlertCallback(data) {//接受原生传过来的数据 data={code:,result:}
if (data.code == CB_CODE_RESULT) {
//
}
else {//..真的是未知的错误
logf('传回其他参数', data.result);
}
}
发送消息js
myNativeEvt.emit('showAlertCallback',value);
native 继承RCTEventEmitter
[self sendEventWithName:@"showAlertCallback"
body:@{
@"code": code,
@"result": result,
}];