React Native 原理

1.OC在 RCTRootView 建立 Bridge

2.使用 setUp 初始化

主要调用 setUp 创建 BatchedBridge(用于批量读取js对OC的方法调用,同时其内部有一个JavaScriptExecutor 执行js代码)

3.创建 BatchedBridge 的关键是 start 方法

  1. 读取js源码
  2. 初始化模块信息
  3. 初始化js代码执行器 即 RCTJSCExecutor
  4. 生成模块列表并写入js端
  5. 执行js源码

初始化模块信息

  1. initModulesWithDispatchGroup中实现

  2. RCT_EXPORT_MODULE 重写了 load 方法
    load方法中用一个全局数组记录所有需要导出到js的类信息

  3. RCT_EXPORT_METHOD 导出oc方法到js 它为函数名添加 rct_export 前缀,再在runtime获取类的函数列表 因此,OC的Bridge就是拥有一个数组,数组中保存了,所有导出给js的类信息 只有给出 ModuleId 和 MethodId 就可以唯一确定要调用的方法。

初始化js代码执行器 即 RCTJSCExecutor 对象 生成模块列表并写入 JavaScript 端

这一步的操作就是为了让 JavaScript 获取所有模块的名字:

- (NSString *)moduleConfig{    NSMutableArray*config = [NSMutableArray new];
    for (RCTModuleData *moduleData in _moduleDataByID) {
       [config addObject:@[moduleData.name]];
    }
  }

执行 JavaScript 源码

Paste_Image.png

OC调用 JavaScript 代码

调用 javaScript 的代码

- (void)_executeJSCall:(NSString *)method arguments:(NSArray *)arguments callback:(RCTJavaScriptCallback)onComplete{
    [self executeBlockOnJavaScriptQueue:^{ 
// 获取 contextJSRef、methodJSRef、moduleJSRef 
    resultJSRef = JSObjectCallAsFunction(contextJSRef, 
                                        (JSObjectRef)methodJSRef,
                                        (JSObjectRef)moduleJSRef, 
                                        arguments.count, 
                                        jsArgs, 
                                        &errorJSRef); 
    objcValue = 
/*resultJSRef 转换成 Objective-C 类型*/ 
    onComplete(objcValue, nil); }];
}

在实际使用的时候,我们可以这样发起对 JavaScript 的调用:但 JavaScript 必须设置监听

[_bridge.eventDispatcher sendAppEventWithName:@"greeted" body:@{ @"name": @"nmae"}];

JavaScript 调用 Objective-C

通过编写原生组件,导出函数或者 UI 组件,来调用原生方法

if(Platform.OS === 'ios') { 
    QRCode = NativeModules.MTQRCodeVC;
} else { 
    QRCode = NativeModules.QrcodeModule;
}
QRCode.scanWithColor(processColor('rgb(0,255,0)'),(codestring) => {})

参考资料

React Native 从入门到原理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容

  • ​ React Native(以下简称RN)的目标是用基于react的JavaScript写代码,在iOS/A...
    Iceguest阅读 3,561评论 0 10
  • React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如...
    零度_不结冰阅读 674评论 0 1
  • 运用一个架构,总得了解一下背后的原理,本文基于react-native的最新版本(0.47.1),简要探究一下re...
    木中木阅读 1,269评论 2 3
  • 早上从拉萨出发,一路向东南,来到靠近印度的林芝。这期间路程有365公里。先是上坡再是下坡。拉萨的海拔高度是...
    我是大王_48f5阅读 381评论 0 2
  • 夏蝉鸣,惊醒春意迟。 元熙朝,启元八年,立夏。 未等落红化作春泥,那晨曦初阳已是让人热得受不住,今年的夏比往年似乎...
    酷听听书阅读 382评论 0 0