Native 启动流程详细解析 React( 二 )


在这里做了三件事:创建 rootView (createRootView)、创建 ReactInstanceManager (getReactInstanceManager)、创建 ReactApplication (startReactApplication) 。
createRootView首先看下什么是 rootView 。
public class ReactRootView extends FrameLayout implements RootView, ReactRoot { /* ... */}
ReactRootView 继承自 FrameLayout,并且实现了 RootView、ReactRoot 两个接口 。FrameLayout 是安卓几大布局中较为简单的一个,整个界面被当成一块空白备用区域,所有元素以左上角对齐堆叠 。ReactRootView 继承自 FrameLayout,表明其也是作为简单布局而存在,UI 的绘制渲染都发生在上面 。
getReactInstanceManagerReactInstanceManager 是一个核心类,管理着 JS 的加载、C++ 和 JS 的交互、初始化参数等 。最终调用来到 ReactNativeHost 类中的 createReactInstanceManager 方法:
protected ReactInstanceManager createReactInstanceManager() {ReactInstanceManagerBuilder builder = /* ... */for (ReactPackage reactPackage : getPackages()) {builder.addPackage(reactPackage);}String jsBundleFile = getJSBundleFile();if (jsBundleFile != null) {builder.setJSBundleFile(jsBundleFile);} else {builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));}ReactInstanceManager reactInstanceManager = builder.build();return reactInstanceManager;}
此处做的事情如下:

  • 创建 ReactInstanceManagerBuilder 实例 。这里采用建造者模式来构造 ReactInstanceManager 实例,故在此先传入参数设定构造者;
  • 把在 ReactNativeHost 中注册的 packages 都添加到 ReactInstanceManagerBuilder 实例中;
  • 如果 getJSBundleFile 不为空,则加载对应的文件,否则加载默认的 jsBundleFile;
  • 调用 builder.build 方法 。通过建造者真正构造 ReactInstanceManager 实例
startReactApplicationpublic void startReactApplication(/* */) {// ...try {// ...mReactInstanceManager.createReactContextInBackground();} finally {// ...}}
最终执行到 ReactInstanceManager 的 createReactContextInBackground 方法中 。最后经过调用链:recreateReactContextInBackgroundInner() -> recreateReactContextInBackgroundFromBundleLoader() -> recreateReactContextInBackground() -> runCreateReactContextOnNewThread()
runCreateReactContextOnNewThread 主要做了两件事:
  1. 创建一个新的线程,并在新线程中通过 createReactContext 创建 ReactContext 上下文;
  2. 通过 setupReactContext 来设置上下文环境,并最终调用到 AppRegistry.js 启动App 。
详细分析我们放到另一篇文章:React Native startReactApplication 流程梳理 。
总结总结本文,通过 react-native-cli 创建的示例工程(安卓部分)为例,顺着两个类 MainApplication 和 MainActivity 的执行流程,抓住主干逻辑,最终梳理出了 React Native 从开始启动至执行用户 js 文件的过程 。可以看到:
【Native 启动流程详细解析 React】MainApplication 的作用主要是传入用户的配置,并做 so 库以及应用 debug 工具的初始化工作;
MainActivity 的作用主要是:
  1. 为应用创建 rootView 布局容器;
  2. 创建 ReactInstanceManager 核心类,用于后续管理 JS 的加载、C++ 和 JS 的交互、初始化参数等;
  3. 通过 startReactApplication 来创建 ReactContext 上下文,并最终调用到 AppRegistry.js 启动App 。
到此这篇关于React Native 启动流程简析的文章就介绍到这了,更多相关React Native 启动内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧!