做了一段时间RN
先说RN中方法调用原理
目前没碰上原生带callback调用js,只有js带callback调用原生
- 原生和js端各自持有一份list,js持有原生注册过的模块和方法信息,还有一份callback列表,当js 调用call(moduleId, methodId, params, callbackId(这个cb保存在callbacklist)),会将 这次调用存在一个队列中(不是正真意义上的主动调用),待原生的事件驱动时会读取队列然后从持有的模块和方法列表中找到对应的 RCT_EXPORTMODULE和RCT_EXPORTMETHOD通过runtime生成对应的类和方法执行,至于callback执行后会在js的callback列表中根据id查找对应的callback执行。
2.native调用js,底层是通过jsbridge持有jsContentRef向js发送消息,在RN 中js通过监听事件的方式来捕捉native的调用事件
hybrid 框架,h5与native交互
h5调用native通过代码注入和URL_SCHEMA(有长度限制)
1.代码注入
iOS端使用wkwebview时,获取到jscontent然后通过[jscontent addScriptMessageHandler:self name:@"nativeBridge"]挂载一个“nativeBridge”,H5通过window.webkit.messageHandlers.nativeBridge.postMessage(message); 发送消息。其中callback执行原理是在js端保存callbacid原生执行完后将返回值和id回传给js找到对应id的callback执行
- URL_SCHEMA
通过拦截iframe.src解析其中的protocal和host以及param再调用native自身方法
native调用h5
result = [uiWebview stringByEvaluatingJavaScriptFromString:javaScriptString];
当使用wkwebview时[wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler];
网友评论