React Native页面加载流程

继上一篇,看下React Native加载流程。原生工程中MainActivity通过RN引擎(React Native Host)找到并加载RN工程打包后的js代码,把RN页面渲染在原生activity界面上。

看下那个最简单demo的详细加载流程。

1、初始化加载底层库

2、RN引擎(ReactNativeHost)初始化

getPackages函数加载RN核心包。(还可以再加载其他包)

getBundleAssetName函数指定bundle文件位置

isHermesEnabled = true启用 JS 引擎。

getJsMainModuleName函数指定React Native应用的js入口文件路径。即对应RN工程的这个文件:

3、MainActivity继承了ReactActivity, 通过ReactActivityDelegate关联到了RN引擎。

getMainComponentName函数作用是告知React native框架加载哪个js组件作为应用根视图。

4、RN引擎读取并解析bundle文件

这里是加载apk的assets目录里的index.android.bundle。 MainApplication代码里指定了。

5、RN引擎渲染App.tsx到MainActivity

解析完 bundle 后,找到index.js中注册的根组件(App.tsx),转换成原生 View,渲染到 MainActivity 的界面上。

可以看出index.js中的App就是App.tsx文件中的App函数。就是调用这个函数渲染的。

ok. 这个demo太简单,后续再修改下,看下原生工程和RN工程间互相通信、接口调用的方式。

相关推荐
三少爷的鞋22 分钟前
别再这么写协程了!Marcin Moskała 剖析的 几个常见协程误区与重构
android
mmsx2 小时前
Android 防二次打包第一道锁:签名校验与完整性校验
android·kotlin
mmsx2 小时前
Android 混淆不等于安全:二次打包链路完整走一遍
android·kotlin
小宋10214 小时前
Agent轨迹级评测实战:工具选择、预算超限与回归门禁
android·网络·人工智能·回归
梦想的颜色5 小时前
【编程实战】AI 时代 APP 开发全栈硬核指南:技术选型 + AI 架构 + 模型落地全维度决策
python·flutter·react native·react.js·ai·桌面应用·milvus
墨天梦6 小时前
D05_ViewModel与单向数据流
android·kotlin
蒸鱼Yuzheng7 小时前
Android 构建可复现性:APK 指纹、文件级差异与供应链审计
android·apk·devops·软件供应链·可复现构建
墨天梦9 小时前
D03_Compose列表与稳定身份
android·gitee·kotlin
萌新杰少10 小时前
Kuikly股票查看软件开发体验——SaiRen
android·kotlin·客户端
vilya10 小时前
把 Python 塞进 APK:Chaquopy 打包实践
android·python