有时候App需要访问平安API， 单在ReactNative中没有相应的模块，或者你需要复用一些Java代码， 不想用JavaScript再重新实现一边；有或者你需要实现一些高性能的，多线程代码，譬如图片处理，数据库，或者一些高级扩展等等。
ReactNative可以与原生平台进行交互
开发iOS原生模块的主要流程
1.编写原生模块的iOS代码
2.暴露接口与数据交互
3.导出ReactNative原生模块
为了暴露接口以及进行数据交互我们需要借助ReactNative的React/RCTBridgeModule.h来操作
#import <React/RCTBridgeModule.h>
@interface AISBridgeModule : NSObject<RCTBridgeModule>
@end
#import "AISBridgeModule.h"
@implementation AISBridgeModule
RCT_EXPORT_MODULE();
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();//让RN在主线程回调这些方法
}
RCT_EXPORT_METHOD(doAdd:(NSInteger )num1 num2:(NSInteger )num2 resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSInteger result=num1+num2;
resolve([NSString stringWithFormat:@"%ld",(long)result]);//回调JS
}
RCT_EXPORT_METHOD(sendMessage:(NSDictionary*)params){//接受RN发过来的消息
[[NSNotificationCenter defaultCenter] postNotificationName:@"sendMessage" object:params];
}
@end
RCT_EXPORT_MODULE：这个方法不传参数，则采用类名作为导出的模块名，如果传参则采用参数名为模块名
RCT_EXPORT_METHOD：主要用来声明需要暴露的接口，被标注的方法支持如下数据类型
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array(NSArray) 包含本列表任意类型
object(NSDictionary) 包含string类型的键与本列表中任意类型的值
function (RCTResponseSenderBlock)
原生模块向JS传递数据我们可以介乎CallBacks和Promise
CallBacks
原生模块支持一个特殊类型的参数CallBacks，我们可以通过它来对js进行回调，告诉js调用原生模块方法的结果。
原生
RCT_EXPORT_METHOD(doAdd:(NSInteger )num1 num2:(NSInteger )num2 success:(RCTResponseSenderBlock)success
failure:(RCTResponseErrorBlock)failure){
NSInteger result=num1+num2;
success(@[[NSString stringWithFormat:@"%ld",(long)result]]);
}
JS调用
const modules = NativeModules.AISBridgeModule
modules.doAdd(parseInt(this.num1), parseInt(this.num2),(error, result) => {
if ( error) {
console.log(error);
} else {
console.log(result);
}
, ()=>{
})
Promises:
如果我们暴露的方法最后一个参数是Promise，那么JS调用它的时候将会返回一个Promise
原生
RCT_EXPORT_METHOD(doAdd:(NSInteger )num1 num2:(NSInteger )num2 resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSInteger result=num1+num2;
resolve([NSString stringWithFormat:@"%ld",(long)result]);//回调JS
}
JS
const modules = NativeModules.AISBridgeModule
modules.doAdd(parseInt(this.num1), parseInt(this.num2)).then(e => {
this.setState({
result: e
})
})
另外我们也可以用ES2016的async/await语法来简化我们的代码
async doAdd(){
const modules = NativeModules.AISBridgeModule
var result = await modules.doAdd(parseInt(this.num1), parseInt(this.num2))
}
提示：另外要告诉大家的是无论Callbacks还是Promise，我们都只
能调用一次，也就是”you call me once, I can only call you once“
接下来我为大家介绍一种原生模块可以多次向js传递数据的方式
RCTEventEmitter
向JS发送事件
在原生模块中我们可以向js发送多次时间，即使原生模块么有被直接调用。
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
@interface DataToJSPresenter : RCTEventEmitter <RCTBridgeModule>
@end
#import "DataToJSPresenter.h"
@implementation DataToJSPresenter
- (NSArray<NSString *> *)supportedEvents
{
return @[@"testData"];
}
- (instancetype)init {
if (self = [super init]) {//在module初始化的时候注册fireData广播
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(fireData:) name:@"fireData" object:nil];
}
return self;
}
- (void)fireData:(NSNotification *)notification{//发送数据给RN
NSString *eventName = notification.object[@"name"];
NSDictionary *params = notification.object[@"params"];
[self sendEventWithName:eventName body:params];
}
@end
事件调度名
-(NSArray<NSString *> *)supportedEvents
发送事件
-(void)sendEventWithName:(NSString *)eventName body:(id)body
eventName就是我们要发送的事件名，params是此次事件所带的数据，接下来我们就可以在js模块中监听这个事件了
UNSAFE_componentWillMount() {
// console.log("bridge", JSBridge);
console.log("AISBridgeModule", NativeModules.AISBridgeModule)
// const modules = NativeModules.AISBridgeModule
this.testDataListener = DeviceEventEmitter.addListener('testData', e => {//for Android
this.setState({
data: e.data
})
});
this.dataToJSPresenter = new NativeEventEmitter(NativeModules.DataToJSPresenter);
console.log("dataToJSPresenter", this.dataToJSPresenter)
this.dataToJSPresenter.addListener('testData', (e) => {// for iOS
console.log("testData", e);
this.setState({
data: e.data
})
})
}
不要忘记在组件被卸载的时候移除监听
componentWillUnmount() {
if (this.testDataListener) {
this.testDataListener.remove();
}
if (this.dataToJSPresenter){
// this.dataToJSPresenter.removeListener('testData');
this.dataToJSPresenter.removeAllListeners
}
}
这个是android端的事件发送器代码
private void sendEvent(ReactContext, String eventName, @Nullable WritableMap params){
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(event, params)
}
关于线程：
ReactNative在一个独立串行的GCD队列中调用原生模块的方法，在我们为ReactNative开发原生模块的时候，如果有耗时操作，比如：文件的读写，网络操作等，我们需要新开辟一个线程，不然的话，这些耗时操作会阻塞JS线程。通过实现方法- (dispatch_queue_t)methodQueue，原生可以指定自己在哪个队列中被执行。具体来说如果调用一些必须在主线程中才能使用的API，
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();//让RN在主线程回调这些方法
}
如果操作需要花费很长时间，则应道声明一个用于执行操作的独立队列。举个历史RCTAsyncLocalStorage模块创建了一个自己的queue，这样它在做一些较慢的磁盘操作的时候就不会阻塞React本身的消息队列：
- (dispatch_queue_t)methodQueue
{
return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_CONCURRENT);
}
指定的methodQueue会被模块里的所有方法功效，如果你的方法只有一个好事较长的（或者由于某种原因必须在不同队列中运行的）， 你可以在函数体内用dispatch_async方法来在另一个队列执行，而不影响其他方法
网友评论