苦逼前端

iOS平台React Native调用native functions

Javascript2015-12-07 21:58

随着react-native开发的继续深入,我们终于来到了react-native和native相互调用这道坎,本文将介绍react-native调用native functions,下一篇介绍native调用react-native functions(iOS)

官方文档其实写的比较清楚了,感觉这里大部分只是手动把这一过程实践了而已,先想好一个模块的名字,我们以CallNativeTest为例:分别创建CallNativeTest.h和CallNativeTest.m两个文件:

//CallNativeTest.h
#import "RCTBridgeModule.h"
@interface CallNativeTest: NSObject <RCTBridgeModule>
@end
//CallNativeTest.m
#import "CallNativeTest.h"
@implementation CallNativeTest
//将模块输出至react-native模块,js中可通过NativeModules.CallNativeTest访问到
RCT_EXPORT_MODULE();
//往该模块添加addEvent方法,js中可通过NativeModules.CallNativeTest.addEvent访问到
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
    NSLog(@"I have got the message %@ at %@", name, location);
}
//添加一个接收函数类型参数的函数
RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback){
    NSString *events = @"abcd";
    callback(@[[NSNull null], events]);
}
@end

在js中调用:

import {
    NativeModules
} from 'react-native';

NativeModules.CallNativeTest.addEvent('hello native', 'someposition');
//将会在xcode的控制台看到输出:I have got the message hello native at someposition
NativeModules.CallNativeTest.findEvents((error, result) => {
    if(error){
        console.log(error);
    }
    else{
        console.log(result);
    }
});
//将会在浏览器控制台看到输出:abcd

这样就完成了iOS平台react-native调用native提供的方法了,其实后面定义的接收[函数类型参数]的函数已经可以实现在oc中调用js定义的方法了,但还是js主动调用oc才能实现,我们还需要oc主动调用js,也就是下一篇要写的内容。

评论(3)
  • luckymore: js咋还有头文件。。4年9个月前
  • xwl: 明明是objective-c...4年9个月前
  • 116.90.80.*: @xwl 吼吼[偷笑]4年1个月前
还可输入200个字