一、引言
不扯虚的，主要在于iOS的JavaScript引擎库的使用，这里推荐## April Peng翻译的老外教程，很干货
二、iOS调用JS代码
2.1 加入JavaScriptCore库
image.png
加入代码
#import <JavaScriptCore/JavaScriptCore.h>
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
