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

相关推荐
Flywith242 小时前
【每日一技】Raycast 实现 scrcpy 的快捷显示隐藏
android·前端
没有了遇见3 小时前
Android(Coil,Glide)大量图片加载缓存清理问题(二 Coil处理)
android
城东米粉儿3 小时前
Android Dagger2笔记
android
没有了遇见4 小时前
Android(Coil,Glide)大量图片加载缓存清理问题(一)
android
恋猫de小郭4 小时前
谷歌 Genkit Dart 正式发布:现在可以使用 Dart 和 Flutter 构建全栈 AI 应用
android·前端·flutter
曾经我也有梦想5 小时前
Day4 Kotlin 高级特性
android
simplepeng5 小时前
Compose Multiplatform 中的 Navigation 3
android
Kapaseker11 小时前
一杯美式讲完 Sealed Class
android·kotlin
冬奇Lab1 天前
PowerManagerService(下):Doze模式与电池优化
android·源码阅读
砖厂小工1 天前
Compose 中函数引用 vs Lambda:到底该用哪个?
android