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

相关推荐
alexhilton1 天前
Android车载OS中的Remote Compose
android·kotlin·android jetpack
落魄Android在线炒饭1 天前
Android 自定义HAL开发篇之 HIDL篇——从入门到实战(上)
android
plainGeekDev1 天前
广播接收器 → Flow + Lifecycle
android·java·kotlin
plainGeekDev1 天前
EventBus → SharedFlow
android·java·kotlin
37手游移动客户端团队2 天前
招聘-高级安卓开发工程师
android·客户端
用户41659673693552 天前
WebView 请求异常排查操作手册
android·前端
Kapaseker2 天前
学不动了,入门 Compose Styles API
android·kotlin
墨狂之逸才3 天前
Android TV WebView 遥控器按键处理:从全透传到白名单
android
plainGeekDev3 天前
MVC 写法 → MVVM
android·java·kotlin
恋猫de小郭3 天前
Flutter Patchwork,不用 Fork 改依赖包源码的第三方工具
android·前端·flutter