React Native 与 原生交互

http://www.jianshu.com/p/41dd77a83c13

React Native 与原生交互一般有三种方式，分别是Callback,Promise,RCTDeviceEventEmitter

本文所有代码片段基于

React Native

"react": "16.0.0-alpha.6","react-native": "0.43.3"

iOS

Xcode 8.2.1iOS 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提供调用方法,CallbackRCT_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 OCNativeEventRCT_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,                        }];