ReactNative与iOS通信起底

一、引言

不扯虚的，主要在于iOS的JavaScript引擎库的使用，这里推荐## April Peng翻译的老外教程，很干货

二、iOS调用JS代码

2.1 加入JavaScriptCore库

image.png

加入代码#import

2.2 简单上手：JSContext / JSValue

JSContext *context = [[JSContext alloc] init];
[context evaluateScript:@"var num = 1+4"];
[context evaluateScript:@"var names = ['Will', 'Arenas', 'James']"];
[context evaluateScript:@"var triple = function(value){return value * 3}"];
JSValue *tripleNum = [context evaluateScript:@"triple(num)"];
NSLog(@"r:%d", tripleNum.toInt32);

JSContext用于执行JS代码块
JSValue用于拿到JS里的变量值、函数、以及函数执行结果，比较全能啦

2.3 获取JS里数组里某个元素

JSValue *names = context[@"names"];
JSValue *firstName = names[0];
NSLog(@"r:%@", firstName.toString);

2.4 JS函数传入OC写的参数

JSValue *tripleFunc = context[@"triple"];
JSValue *result = [tripleFunc callWithArguments:@[@5]];
NSLog(@"r:%d", result.toInt32);

callWithArguments用于传入多个\单个参数

2.5 错误处理

context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    NSLog(@"JS Error:%@", exception);
};
[context evaluateScript:@"function mul(value1, value2){return value1 * value2"];

打印如下

image.png

附注：JSValue导出结果

image.png

三、JS调用iOS代码

3.1 方法一：通过block

context[@"sayHello"] = ^(NSString *string){
    return [NSString stringWithFormat:@"Hello %@", string];
};
JSValue *result = [context evaluateScript:@"sayHello('Will')"];
NSLog(@"r:%@", result.toString);

JavaScriptCore 会自动的把 block 封装在 JavaScript 函数里，确实是牛逼

image.png

3.2 方法二：通过JSExport 协议

四、RN是如何解析JS的

那么问题来了，RN是怎么做的呢，很明显苹果JavascriptCore提供的block或者JSExport不能满足RN，RN自定义了一套JS与OC通信协议(RCTJSExecutor)，只是用了JavascriptCore作为解析引擎，确实吊

ReactNative2.png