iOS原生 Native和Javascript交互_native.js for ios-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15618773/article/details/108514146

本文介绍了在iOS应用中，如何实现在Native代码中运行JavaScript，以及让JavaScript调用Native方法。通过JSContext对象执行JS代码，并注入Native方法，实现服务端下发JS代码，客户端解析并渲染native控件和事件，揭示了类似react-native的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Native中运行JavaScript代码

通过JSContext对象（类似于JavaScript运行环境），执行js代码（从js文件中获取的NSString）

//获取js文件路径
NSString *path = [[NSBundle mainBundle] pathForResource:"main" ofType:@"js"];
//读取js数据
NSData *jsData =[[NSData alloc]initWithContentsOfFile:path];

//从data解码成string类型的JS代码（无参）
NSString *jsCode = [[NSString alloc]initWithData:jsData encoding:NSUTF8StringEncoding];
//组装js代码（若带参，从上面的无参代码中组装参数）
NSString *fiString = [NSString stringWithFormat:jsCode,paramString];

//初始化JSContext对象
self.jsContext = [[JSContext alloc]init];
//执行JS代码（无参）
[self.jsContext evaluateScript:jsCode];
//执行JS代码（带参）
[self.jsContext evaluateScript:fiString];

Javascript中运行Native代码

通过JSContext，将native方法注入并命名，然后在JavaScript运行环境中调用（根据JSContext注入时的命名）

//定义一个block
int (^block)(NSString *) = ^(NSString *name){
   
    NSLog(@"hello javascript");
    return 99；
};
//JS注入native方法并将其命名为oc_hello
[self.jsContext setObject:block forKeyedSubscript:@"oc_hello"];

//js调用 oc_hello("someName")即可， !!!必须带括号，否则只是获得了函数体，而非执行
//js调用结束后返回值为99

解析JS代码并渲染native控件和事件

使用上述两种通信方式，可以实现服务端下发JS代码—客户端解析—渲染native控件、布局、事件（react-native原理）

假设js文件如下

   (function(){
   
       console.log("javaScriptInit");
       //javaScript脚本加载完成后，自动render界面
       return render();
   })();
   //定义Label控件
    function Label(rect,text,color){
   
       this.rect = rect;
       this.text = text;
       this.color = color;
       this.typeName = "Label";
   }
    //定义Button控件
    function Button(rect,text,callFunc){
   
       this.rect = rect;
       this