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

相关推荐
程序员陆业聪24 分钟前
线上监控与防劣化:让启动优化成果不再回退 | Android启动优化系列(五·完结)
android
程序员陆业聪27 分钟前
首帧渲染优化:从白屏到内容可见的最后一公里
android
AI玫瑰助手1 小时前
Python基础:字符串的常用内置方法(查找替换分割)
android·开发语言·python
xiangxiongfly9152 小时前
Android 使用WebSocket通信
android·websocket·网络协议·okhttp
su_ym81103 小时前
Android属性系统
android·framework·property
明天就是Friday3 小时前
Android实战项目③ Room+Clean Architecture开发待办事项App 完整源码详解
android
没有了遇见3 小时前
《彻底搞懂 ViewModel:作用、原理与源码分析》
android
Fate_I_C3 小时前
Kotlin 协程:串行/并行请求、async/await、coroutineScope 管理并发、重试机制
android·代码规范
山河梧念3 小时前
【保姆级教程】VMware虚拟机安装全流程
android·java·数据库
常利兵3 小时前
Kotlin类型魔法:Any、Unit、Nothing 深度探秘
android·开发语言·kotlin