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工程间互相通信、接口调用的方式。

相关推荐
拥小抱14 小时前
Compose 知识点
android
文章永久免费只为良心14 小时前
Web应用安全与防护_第三章_日志文件包含_从一道 CTFshow 题目讲透「日志投毒型 LFI → RCE」:原理、时序陷阱与全变种攻防手册
android·网络安全·渗透测试·漏洞危害·漏洞描述·日志投毒·红队指南
AIsoft_868915 小时前
学术讲座录音如何整理?录音APP可行吗
android·iphone
Patrick在香港17 小时前
一个斜杠,把毫秒变成十几秒
android·数据库·python·性能优化·正则表达式·回溯·redos
海雅达手持终端PDA18 小时前
工业手持终端的“去手机化”演进:看海雅达如何以“同轴扫摄”终结工程妥协,重塑工业PDA新范式
android·物联网·智能手机·硬件工程·能源·制造·iot
booboosui19 小时前
删掉一个住在本机的 agent:8 处要清,顺序不能反
android
hcgeng20 小时前
Android获取崩溃日志
android
aqi0020 小时前
AI编程让鸿蒙开发电子书APP更加快捷
android·华为·harmonyos·鸿蒙·harmony
GY-9320 小时前
【Android】Android Studio 中的协程
android