ReactNative源码篇：启动流程

作者: 郭孝星
邮箱: guoxiaoxingse@163.com
博客: http://blog.csdn.net/allenwells
简书: http://www.jianshu.com/users/66a47e04215b/latest_articles

关于作者

郭孝星，非著名程序员，代码洁癖患者，爱编程，好吉他，喜烹饪，爱一切有趣的事物和人。

关于文章

作者的文章会同时发布在Github、CSDN与简书上,文章顶部也会附上文章的Github链接。如果文章中有什么疑问也欢迎发邮件与我交流,对于交流
的问题,请描述清楚问题并附上代码与日志,一般都会给予回复。如果文章中有什么错误,也欢迎斧正。如果你觉得本文章对你有所帮助,也欢迎去
star文章,关注文章的最新的动态。另外建议大家去Github上浏览文章，一方面文章的写作都是在Github上进行的，所以Github上的更新是最及时
的，另一方面感觉Github对Markdown的支持更好，文章的渲染也更加美观。

文章目录：https://github.com/guoxiaoxing/react-native-android-container/blob/master/README.md

本篇系列文章主要分析ReactNative源码，分析ReactNative的启动流程、渲染原理、通信机制与线程模型等方面内容。

• 1ReactNative源码篇：源码初识
• 2ReactNative源码篇：代码调用
• 3ReactNative源码篇：启动流程
• 4ReactNative源码篇：渲染原理
• 5ReactNative源码篇：线程模型
• 6ReactNative源码篇：通信机制

在分析具体的启动流程之前，我们先从Demo代码入手，对外部的代码有个大致的印象，我们才能进一步去了解内部的逻辑。

1 首先我们会在应用的Application里做RN的初始化操作。

//ReactNativeHost：持有ReactInstanceManager实例，做一些初始化操作。
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    //SoLoader：加载C++底层库，准备解析JS。
    SoLoader.init(this,/* native exopackage */ false);
  }
}

2 页面继承ReactActivity，ReactActivity作为JS页面的容器。

public class MainActivity extends ReactActivity {

    /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */
    @Override
    protected String getMainComponentName() {
        //返回组件名
        return "standard_project";
    }
}

3 有了ReactActivity作为容器，我们就可以用JS开发页面了。

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,View
} from 'react-native';

//Component用来做UI渲染，生命周期控制，事件分发与回调。
export default class standard_project extends Component {
  //render函数返回UI的界面结构（JSX编写，编译完成后最终会变成JS代码）
  render() {
    return (
      <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started,edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> </View> ); } } //创建CSS样式 const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,}); //注册组件名，JS与Java格子各自维护了一个注册表 AppRegistry.registerComponent('standard_project',() => standard_project);

以上便是RN开发的三个步骤，本篇文章我们重点关注RN应用的启动流程，具体说来，有以下几个方面：

1 RN应用的启动的函数调用链，分析流程细节。
2 RN应用启动过程中创建了哪些组件，这些组件各自都由什么功能。

在正式分析启动流程之前，我们先来了解和启动流程相关的一些重要概念。

ReactContext

整个启动流程重要创建实例之一就是ReactContext，在正式介绍启动流程之前，我们先来了接一下ReactContext的概念。

ReactContext继承于ContextWrapper，也就是说它和Android中的Context是一个概念，是整个应用的上下文。那么什么是上下文呢，我们知道Android的应用模型是基于组件的应用设计模式，
组件的运行需要完整的运行环境，这种运行环境便是应用的上下文。

上面的概念可能有点抽象，我们举个例子说明一下。

用户与操作系统的每一次交互都是一个场景，例如：打电话、发短信等有节目的场景（Activity），后台播放音乐等没有节目的场景（Service），这种交互的场景（Activity、Service等）都被
抽象成了上下文环境（Context），它代表了当前对象再应用中所处的一个环境、一个与系统交互的过程。

我们来了解一下ReactContext的具体实现与功能，先来看一下它的类图：

从上图可以看出，ReactContext继承与ContextWrapper，并有子类：

ReactApplicationContext：继承于ReactContext，ReactContext的wrapper类，就像Context与ContextWrapper的关系一样。
ThemedReactContext：继承于ReactContext，也是ReactContext的wrapper类。

NativeModule/UIManagerModule/JavascriptModule

Module即模块，是暴露给对方调用的API集合。

NativeModule/UIManagerModule

NativeModule/UIManagerModule：NativeModule是Java暴露给JS调用的APU集合，例如：ToastModule、DialogModule等，UIManagerModule也是供JS调用的API集合，它用来创建View。
业务放可以通过实现NativeModule来自定义模块，通过getName()将模块名暴露给JS层，通过@ReactMethod注解将API暴露给JS层。

JavaScriptModule：JS暴露给Java调用的API集合，例如：AppRegistry、DeviceEventEmitter等。业务放可以通过继承JavaScriptModule接口类似自定义接口模块，声明与JS相对应的方法
即可。

一 执行器的实现

在C++层的Executor.h文件中同一定义了执行Native代码的抽象类ExecutorDelegate，以及执行JS代码的抽象类JSExecutor。

1.1 Native代码执行器

ExecutorDelegate：在Executor.h中定义，由JsToNativeBridge实现，该抽象类用于JS代码调用Native代码，该类的类图如下所示：

// This interface describes the delegate interface required by
// Executor implementations to call from JS into native code.
class ExecutorDelegate {
 public:
  virtual ~ExecutorDelegate() {}

  //注册JS执行器
  virtual void registerExecutor(std::unique_ptr<JSExecutor> executor,std::shared_ptr<MessageQueueThread> queue) = 0;
  //注销JS执行器
  virtual std::unique_ptr<JSExecutor> unregisterExecutor(JSExecutor& executor) = 0;

  //获取模块注册表
  virtual std::shared_ptr<ModuleRegistry> getModuleRegistry() = 0;

  //调用Native Module，在它实现中，它会进一步调用ModuleRegistry::callNativeMethod() -> NativeModule::invoke()，进而
  //完成对Native Module的调用。
  virtual void callNativeModules(
    JSExecutor& executor,folly::dynamic&& calls,bool isEndOfBatch) = 0;
  virtual MethodCallResult callSerializableNativeHook(
    JSExecutor& executor,unsigned int moduleId,unsigned int methodId,folly::dynamic&& args) = 0;
};

1.2 JS代码执行器

JS的解析是在Webkit-JavaScriptCore中完成的，JSCExexutor.cpp对JavaScriptCore的功能做了进一步的封装，我们来看一下它的实现。

JSExecutor：在Executor.h中定义，正如它的名字那样，它是用来执行JS代码的。执行代码的命令是通过JS层的BatchedBridge传递过来的。

我们先来看一下JSExecutor的类图，可以看到

class JSExecutor {
public:
  /** * Execute an application script bundle in the JS context. */
  virtual void loadApplicationScript(std::unique_ptr<const JSBigString> script,std::string sourceURL) = 0;

  /** * Add an application "unbundle" file */
  virtual void setJSModulesUnbundle(std::unique_ptr<JSModulesUnbundle> bundle) = 0;

  /** * Executes BatchedBridge.callFunctionReturnFlushedQueue with the module ID,* method ID and optional additional arguments in JS. The executor is responsible * for using Bridge->callNativeModules to invoke any necessary native modules methods. */
  virtual void callFunction(const std::string& moduleId,const std::string& methodId,const folly::dynamic& arguments) = 0;

  /** * Executes BatchedBridge.invokeCallbackAndReturnFlushedQueue with the cbID,* and optional additional arguments in JS and returns the next queue. The executor * is responsible for using Bridge->callNativeModules to invoke any necessary * native modules methods. */
  virtual void invokeCallback(const double callbackId,const folly::dynamic& arguments) = 0;

  virtual void setGlobalVariable(std::string propName,std::unique_ptr<const JSBigString> jsonValue) = 0;
  virtual void* getJavaScriptContext() {
    return nullptr;
  }
  virtual bool supportsProfiling() {
    return false;
  }
  virtual void startProfiler(const std::string &titleString) {}
  virtual void stopProfiler(const std::string &titleString,const std::string &filename) {}
  virtual void handleMemoryPressureUiHidden() {}
  virtual void handleMemoryPressureModerate() {}
  virtual void handleMemoryPressureCritical() {
    handleMemoryPressureModerate();
  }
  virtual void destroy() {}
  virtual ~JSExecutor() {}
};

可以看到除了JSExecutor.cpp实现了抽象类JSExecutor里的方法，ProxyExecutor.cpp也实现了它里面的方法，这是RN给了我们自定义JS解析器的能力，可以在CatalystInstance.Builder里
setJSExecutor()，具体可以参见JavaJSExecutor与ProxyJavaScriptExecutor，它们的类图如下所示：

二 RN应用的启动流程

一句话概括启动流程：先是应用终端启动并创建应用上下文，应用上下文启动JS Runtime，进行布局，再由应用终端进行渲染，最后将渲染的View添加到ReactRootView上，最终呈现在用户面前。

RN应用的启动流程图如下所示：

详细流程：

1 在程序启动的时候，也就是ReContextactActivity的onCreate()函数中，我们会去创建一个ReactInstanceManagerImpl对象

2 ReactRootView作为整个RN应用的根视图，通过调用ReactRootView.startReactApplication()方法启动RN应用。

3 RN应用页面渲染前，需要先创建ReactContext的创建流程在，异步任务ReactContextInitAsyncTask负责来完成这个任务。

4 ReactContextInitAsyncTask在后台ReactContextInitAsyncTask.doInBackground()执行ReactContext的创建，创建ReactContext的过程中，会依据ReactPackage创建JavaScriptModuleRegistry与
NativeModuleRegistry注册表以及它们的管理类CatalystInstanceImpl，同时创建JS、Native与UI线程队列，并最终调用CatalystInstanceImpl.runJSBundle()去异步
加载JS Bundle文件。

5 后台任务执行完成后，在ReactContextInitAsyncTask.onPostExecute()会调用ReactInstanceManager.setupReactContext()设置创建好的ReactContext，并将
ReactRootView加载进来，并调用RN应用的JS入口APPRegistry来启动应用。

6 JS层找到已经注册的对应的启动组件，执行renderApplication()来渲染整个应用。

好，我们先从ReactActivity入手。

ReactActivity继承于Activity，并实现了它的生命周期方法。ReactActivity自己并没有做什么事情，所有的功能都由它的委托类ReactActivityDelegate来完成。

如下所示：

所以我们主要来关注ReactActivityDelegate的实现。我们先来看看ReactActivityDelegate的onCreate()方法。

2.1 ReactActivityDelegate.onCreate(Bundle savedInstanceState)

public class ReactActivityDelegate {

  protected void onCreate(Bundle savedInstanceState) {
    boolean needsOverlayPermission = false;
    //开发模式判断以及权限检查
    if (getReactNativeHost().getUseDeveloperSupport() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
      // Get permission to show redBox in dev builds.
      if (!Settings.canDrawOverlays(getContext())) {
        needsOverlayPermission = true;
        Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,Uri.parse("package:" + getContext().getPackageName()));
        FLog.w(ReactConstants.TAG,REDBox_PERMISSION_MESSAGE);
        Toast.makeText(getContext(),REDBox_PERMISSION_MESSAGE,Toast.LENGTH_LONG).show();
        ((Activity) getContext()).startActivityForResult(serviceIntent,REQUEST_OVERLAY_PERMISSION_CODE);
      }
    }

    //mMainComponentName就是上面ReactActivity.getMainComponentName()返回的组件名
    if (mMainComponentName != null && !needsOverlayPermission) {
        //载入app页面
      loadApp(mMainComponentName);
    }
    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
  }

  protected void loadApp(String appKey) {
    if (mReactRootView != null) {
      throw new IllegalStateException("Cannot loadApp while app is already running.");
    }
    //创建ReactRootView作为根视图,它本质上是一个FrameLayout
    mReactRootView = createRootView();
    //启动RN应用
    mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),appKey,getLaunchOptions());
    //Activity的setContentView()方法 
    getPlainActivity().setContentView(mReactRootView);
  }
}

可以发现ReactActivityDelegate在创建时主要做了以下事情：

1 创建ReactRootView作为应用的容器，它本质上是一个FrameLayout。
2 调用ReactRootView.startReactApplication()进一步执行应用启动流程。
3 调用Activity.setContentView()将创建的ReactRootView作为ReactActivity的content view。

尅看出RN真正核心的地方就在于ReactRootView，它就是一个View，你可以像用其他UI组件那样把它用在Android应用的任何地方。好，我们进一步去ReactRootView看启动流程。

2.2 ReactRootView.startReactApplication( ReactInstanceManager reactInstanceManager,String moduleName,@Nullable Bundle launchOptions)

public class ReactRootView extends SizeMonitoringFrameLayout implements RootView {

  /** * Schedule rendering of the react component rendered by the JS application from the given JS * module (@{param moduleName}) using provided {@param reactInstanceManager} to attach to the * JS context of that manager. Extra parameter {@param launchOptions} can be used to pass initial * properties for the react component. */
  public void startReactApplication(
      ReactInstanceManager reactInstanceManager,@Nullable Bundle launchOptions) {
    UiThreadUtil.assertOnUiThread();

    // TODO(6788889): Use POJO instead of bundle here,apparently we can't just use WritableMap
    // here as it may be deallocated in native after passing via JNI bridge,but we want to reuse
    // it in the case of re-creating the catalyst instance
    Assertions.assertCondition(
        mReactInstanceManager == null,"This root view has already been attached to a catalyst instance manager");

    mReactInstanceManager = reactInstanceManager;
    mJSModuleName = moduleName;
    mLaunchOptions = launchOptions;

    //创建RN应用上下文
    if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
      mReactInstanceManager.createReactContextInBackground();
    }

    // We need to wait for the initial onMeasure,if this view has not yet been measured,we set which
    // will make this view startReactApplication itself to instance manager once onMeasure is called.
    if (mWasMeasured) {
      attachToReactInstanceManager();
    }
  }

}

我们来看看这个函数的3个参数：

···
ReactInstanceManager reactInstanceManager：管理React实例。
String moduleName：模块的名字，对应ReactActivity.getMainComponentName()与AppRegistry.registerComponent()。
Bundle launchOptions：Bundle类型的数据，如果我们不继承ReactActivity而是自己实现页面容器，可以通过这个参数在startActivity()时传递参数到JS层。
···

我们可以看到，ReactRootView.startReactApplication()方法里最终会调用ReactInstanceManager.createReactContextInBackground()来创建RN应用的上下文。

2.3 ReactInstanceManager.createReactContextInBackground()

public class ReactInstanceManager {

 /** * Trigger react context initialization asynchronously in a background async task. This enables * applications to pre-load the application JS,and execute global code before * {@link ReactRootView} is available and measured. This should only be called the first time the * application is set up,which is enforced to keep developers from accidentally creating their * application multiple times without realizing it. * * Called from UI thread. */
  public void createReactContextInBackground() {
    Assertions.assertCondition(
        !mHasStartedCreatingInitialContext,"createReactContextInBackground should only be called when creating the react " +
            "application for the first time. When reloading JS,e.g. from a new file,explicitly" +
            "use recreateReactContextInBackground");

    mHasStartedCreatingInitialContext = true;
    //进一步调用recreateReactContextInBackgroundInner()
    recreateReactContextInBackgroundInner();
  }

  /** * Recreate the react application and context. This should be called if configuration has * changed or the developer has requested the app to be reloaded. It should only be called after * an initial call to createReactContextInBackground. * * Called from UI thread. */
  public void recreateReactContextInBackground() {
    Assertions.assertCondition(
        mHasStartedCreatingInitialContext,"recreateReactContextInBackground should only be called after the initial " +
            "createReactContextInBackground call.");
    recreateReactContextInBackgroundInner();
  }

  private void recreateReactContextInBackgroundInner() {
    UiThreadUtil.assertOnUiThread();

    //开发模式，实现在线更新Bundle，晃动弹出调试菜单等功能，这一部分属于调试功能流程。
    if (mUseDeveloperSupport && mJSMainModuleName != null) {
      final DeveloperSettings devSettings = mDevSupportManager.getDevSettings();

      // If remote JS debugging is enabled,load from dev server.
      //判断是否处于开发模式，如果处于开发模式，则从Dev Server中获取JSBundle，如果不是则从文件中获取。
      if (mDevSupportManager.hasUpToDateJSBundleInCache() &&
          !devSettings.isRemoteJSDebugEnabled()) {
        // If there is a up-to-date bundle downloaded from server,
        // with remote JS debugging disabled,always use that.
        onJSBundleLoadedFromServer();
      } else if (mBundleLoader == null) {
        mDevSupportManager.handleReloadJS();
      } else {
        mDevSupportManager.isPackagerRunning(
            new PackagerStatusCallback() {
              @Override
              public void onPackagerStatusFetched(final boolean packagerIsRunning) {
                UiThreadUtil.runOnUiThread(
                    new Runnable() {
                      @Override
                      public void run() {
                        if (packagerIsRunning) {
                          mDevSupportManager.handleReloadJS();
                        } else {
                          // If dev server is down,disable the remote JS debugging.
                          devSettings.setRemoteJSDebugEnabled(false);
                          recreateReactContextInBackgroundFromBundleLoader();
                        }
                      }
                    });
              }
            });
      }
      return;
    }

    //线上模式
    recreateReactContextInBackgroundFromBundleLoader();
  }

  private void recreateReactContextInBackgroundFromBundleLoader() {
    //mJSCConfig可以在ReactNativeHost创建ReactInstanceManager时进行配置。mJSCConfig会通过JSCJavaScriptExecutor的
    //Native方法HybridData initHybrid(ReadableNativeArray jscConfig)传递到C++层。
    recreateReactContextInBackground(
        new JSCJavaScriptExecutor.Factory(mJSCConfig.getConfigMap()),mBundleLoader);
  }

  private void recreateReactContextInBackground(
      JavaScriptExecutor.Factory jsExecutorFactory,JSBundleLoader jsBundleLoader) {
    UiThreadUtil.assertOnUiThread();

    ReactContextInitParams initParams =
        new ReactContextInitParams(jsExecutorFactory,jsBundleLoader);
    if (mReactContextInitAsyncTask == null) {
      //初始化一个异步任务，创建ReactApplicationContext
      // No background task to create react context is currently running,create and execute one.
      mReactContextInitAsyncTask = new ReactContextInitAsyncTask();
      mReactContextInitAsyncTask.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR,initParams);
    } else {
      //创建ReactContext的后台任务已经开启，缓存initParams在队列中等待重新创建ReactContext
      // Background task is currently running,queue up most recent init params to recreate context
      // once task completes.
      mPendingReactContextInitParams = initParams;
    }
  }

}

整个代码的调用链，最终开启异步任务ReactContextInitAsyncTask来创建上下文ReactApplicationContext。

ReactInstanceManager.createReactContextInBackground()
->ReactInstanceManager.recreateReactContextInBackground()
->ReactInstanceManager.recreateReactContextInBackgroundInner()
->ReactInstanceManager.recreateReactContextInBackgroundFromBundleLoader()
->ReactInstanceManager.recreateReactContextInBackground(JavaScriptExecutor.Factory jsExecutorFactory,JSBundleLoader jsBundleLoader)
->ReactContextInitAsyncTask

该方法启动了一个ReactContextInitAsyncTask的异步任务去执行的创建。

2.4 ReactInstanceManager.ReactContextInitAsyncTask.doInBackground(ReactContextInitParams… params)

public class ReactInstanceManager {

 /* * Task class responsible for (re)creating react context in the background. These tasks can only * be executing one at time,see {@link #recreateReactContextInBackground()}. */
  private final class ReactContextInitAsyncTask extends AsyncTask<ReactContextInitParams,Void,Result<ReactApplicationContext>> {

    @Override
    protected Result<ReactApplicationContext> doInBackground(ReactContextInitParams... params) {
      // TODO(t11687218): Look over all threading
      // Default priority is Process.THREAD_PRIORITY_BACKGROUND which means we'll be put in a cgroup
      // that only has access to a small fraction of cpu time. The priority will be reset after
      // this task finishes: https://android.googlesource.com/platform/frameworks/base/+/d630f105e8bc0021541aacb4dc6498a49048ecea/core/java/android/os/AsyncTask.java#256
      Process.setThreadPriority(Process.THREAD_PRIORITY_DEFAULT);

      Assertions.assertCondition(params != null && params.length > 0 && params[0] != null);
      try {
        //利用getJsExecutorFactory创建jsExecutor，并传递到C++层。
        JavaScriptExecutor jsExecutor = params[0].getJsExecutorFactory().create();
        //异步执行createReactContext()方法，创建ReactContext
        return Result.of(createReactContext(jsExecutor,params[0].getJsBundleLoader()));
      } catch (Exception e) {
        // Pass exception to onPostExecute() so it can be handled on the main thread
        return Result.of(e);
      }
    }
}

ReactContextInitAsyncTask的doInBackground()方法里调用ReactInstanceManager.createReactContext()最终执行了ReactApplicationContext的创建。
我们重点来看看传入ReactInstanceManager.createReactContext()的2个参数：

JSCJavaScriptExecutor jsExecutor：JSCJavaScriptExecutor继承于JavaScriptExecutor，当该类被加载时，它会自动去加载"reactnativejnifb.so"库，并会调用Native方
法initHybrid()初始化C++层RN与JSC通信的框架。

JSBundleLoader jsBundleLoader：缓存了JSBundle的信息，封装了上层加载JSBundle的相关接口，CatalystInstance通过其简介调用ReactBridge去加载JS文件，不同的场景会创建
不同的加载器，具体可以查看类JSBundleLoader。

这两个参数是ReactInstanceManager.recreateReactContextInBackground()创建ReactContextInitAsyncTask传递进来的，有两个地方调用了ReactInstanceManager.recreateReactContextInBackground()
方法，

接下来调用ReactInstanceManager.createReactContext()，真正开始创建ReactContext。

2.5 ReactInstanceManager.createReactContext( JavaScriptExecutor jsExecutor,JSBundleLoader jsBundleLoader)

public class ReactInstanceManager {

/** * @return instance of {@link ReactContext} configured a {@link CatalystInstance} set */
  private ReactApplicationContext createReactContext(
      JavaScriptExecutor jsExecutor,JSBundleLoader jsBundleLoader) {
    FLog.i(ReactConstants.TAG,"Creating react context.");
    ReactMarker.logMarker(CREATE_REACT_CONTEXT_START);
    //ReactApplicationContext是ReactContext的包装类。
    final ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext);
    //创建JavaModule注册表Builder，用来创建JavaModule注册表，JavaModule注册表将所有的JavaModule注册到CatalystInstance中。
    NativeModuleRegistryBuilder nativeModuleRegistryBuilder = new NativeModuleRegistryBuilder(
      reactContext,this,mLazyNativeModulesEnabled);
    //创建JavaScriptModule注册表Builder，用来创建JavaScriptModule注册表，JavaScriptModule注册表将所有的JavaScriptModule注册到CatalystInstance中。
    JavaScriptModuleRegistry.Builder jsModulesBuilder = new JavaScriptModuleRegistry.Builder();
    if (mUseDeveloperSupport) {
      //如果处于开发模式，则设置NativeModuleCallExceptionHandler，将错误交由DevSupportManager处理（弹出红框，提示错误）。
      reactContext.setNativeModuleCallExceptionHandler(mDevSupportManager);
    }

    ReactMarker.logMarker(PROCESS_PACKAGES_START);
    Systrace.beginSection(
        TRACE_TAG_REACT_JAVA_BRIDGE,"createAndProcesscoreModulesPackage");
    try {
      //创建CoreModulesPackage实例，CoreModulesPackage里面封装了RN Framework核心功能，包括：通信、调试等。
      CoreModulesPackage coreModulesPackage =
        new CoreModulesPackage(
          this,mBackBtnHandler,mUIImplementationProvider,mLazyViewManagersEnabled);
      //调用processPackage(0处理CoreModulesPackage，处理的过程就是把各自的Module添加到对应的注册表中。
      processPackage(coreModulesPackage,nativeModuleRegistryBuilder,jsModulesBuilder);
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
    }

    // TODO(6818138): Solve use-case of native/js modules overriding
    for (ReactPackage reactPackage : mPackages) {
      Systrace.beginSection(
          TRACE_TAG_REACT_JAVA_BRIDGE,"createAndProcessCustomReactPackage");
      try {
        //循环处理我们在Application里注入的ReactPackage，处理的过程就是把各自的Module添加到对应的注册表中。
        processPackage(reactPackage,jsModulesBuilder);
      } finally {
        Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      }
    }
    ReactMarker.logMarker(PROCESS_PACKAGES_END);

    ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_START);
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE,"buildNativeModuleRegistry");
    NativeModuleRegistry nativeModuleRegistry;
    try {
       //生成Java Module注册表
       nativeModuleRegistry = nativeModuleRegistryBuilder.build();
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      ReactMarker.logMarker(BUILD_NATIVE_MODULE_REGISTRY_END);
    }

    //查看外部是否设置NativeModuleCallExceptionHandler，它是在ReactInstanceManagerBuilder构建ReactInstanceManager是传递进来的
    //如果设置了则使用外部NativeModuleCallExceptionHandler，如果没有设置则使用DevSupportManager。
    NativeModuleCallExceptionHandler exceptionHandler = mNativeModuleCallExceptionHandler != null
        ? mNativeModuleCallExceptionHandler
        : mDevSupportManager;
    //jsExecutor、nativeModuleRegistry、nativeModuleRegistry等各种参数处理好之后，开始构建CatalystInstanceImpl实例。
    CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder()
        .setReactQueueConfigurationSpec(ReactQueueConfigurationSpec.createDefault())
        .setJSExecutor(jsExecutor)
        .setRegistry(nativeModuleRegistry)
        //生成JS Module注册表
        .setJSModuleRegistry(jsModulesBuilder.build())
        .setJSBundleLoader(jsBundleLoader)
        .setNativeModuleCallExceptionHandler(exceptionHandler);

    ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_START);
    // CREATE_CATALYST_INSTANCE_END is in JSCExecutor.cpp
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE,"createCatalystInstance");
    final CatalystInstance catalystInstance;
    try {
      catalystInstance = catalystInstanceBuilder.build();
    } finally {
      Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
      ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_END);
    }

    if (mBridgeIdleDebugListener != null) {
      catalystInstance.addBridgeIdleDebugListener(mBridgeIdleDebugListener);
    }
    if (Systrace.isTracing(TRACE_TAG_REACT_APPS | TRACE_TAG_REACT_JSC_CALLS)) {
      //调用CatalystInstanceImpl的Native方法把Java Registry转换为Json，再由C++层传送到JS层。
      catalystInstance.setGlobalVariable("__RCTProfileIsProfiling","true");
    }

    //关联ReacContext与CatalystInstance
    reactContext.initializeWithInstance(catalystInstance);
    //通过CatalystInstance开始加载JS Bundle
    catalystInstance.runJSBundle();

    return reactContext;
  }
}

这个方法有点长，它主要做了以下事情：

1 创建JavaModule注册表与JavaScriptModule注册表，这两张表最后都交由CatalystInstance管理。
3 处理ReactPackage，将JavaModule与JavaScriptModule放进各自对应的注册表里。
3 通过上面jsExecutor、nativeModuleRegistry、jsModulesRegistry、jsBundleLoader、exceptionHandler等参数创建CatalystInstance实例。
4 关联ReactContext与CatalystInstance，并将JS Bundle加载进来，等待ReactContextInitAsyncTask结束以后调用JS入口渲染页面。

该函数的最后调用CatalystInstance.runJSBundle()去加载JS Bundle，该加载过程的函数调用链如下所示：

CatalystInstance.runJSBundle() -> JSBundleLoader.loadScript() -> CatalystInstance.jniLoadScriptFromAssets()/jniLoadScriptFromFile()
-> CatalystInstance::jniLoadScriptFromAssets()/jniLoadScriptFromFile() -> Instance::loadScriptFromString()/loadScriptFromFile()
-> NativeToJsBridge::loadApplication() -> JSCExecutor::loadApplicationScript()

最终由C++中的JSCExecutor.cpp完成了JS Bundle的加载，核心逻辑都在JSCExecutor.cpp中，这一块的内容我们后续的文章在详细分析，我们先来看看CatalystInstanceImpl的创建流程。

2.6 CatalystInstanceImpl.CatalystInstanceImpl( final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,final JavaScriptExecutor jsExecutor,final NativeModuleRegistry registry,final JavaScriptModuleRegistry jsModuleRegistry,final JSBundleLoader jsBundleLoader,NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler)

public class CatalystInstanceImpl implements CatalystInstance {

private CatalystInstanceImpl(
      final ReactQueueConfigurationSpec ReactQueueConfigurationSpec,final JavaScriptExecutor jsExecutor,final NativeModuleRegistry registry,final JavaScriptModuleRegistry jsModuleRegistry,final JSBundleLoader jsBundleLoader,NativeModuleCallExceptionHandler nativeModuleCallExceptionHandler) {
    FLog.w(ReactConstants.TAG,"Initializing React Xplat Bridge.");

    //Native方法，用来创建JNI相关状态，并返回mHybridData。
    mHybridData = initHybrid();

    //RN中的三个线程：Native Modules Thread、JS Thread、UI Thread，都是通过Handler来管理的。
    mReactQueueConfiguration = ReactQueueConfigurationImpl.create(
        ReactQueueConfigurationSpec,new NativeExceptionHandler());
    mBridgeIdleListeners = new CopyOnWriteArrayList<>();
    mJavaRegistry = registry;
    mJSModuleRegistry = jsModuleRegistry;
    mJSBundleLoader = jsBundleLoader;
    mNativeModuleCallExceptionHandler = nativeModuleCallExceptionHandler;
    mTraceListener = new JSProfilerTraceListener(this);

    FLog.w(ReactConstants.TAG,"Initializing React Xplat Bridge before initializeBridge");
    //Native方法，调用initializeBridge()方法，并创建BridgeCallback实例，初始化Bridge。
    initializeBridge(
      new BridgeCallback(this),jsExecutor,mReactQueueConfiguration.getJSQueueThread(),mReactQueueConfiguration.getNativeModulesQueueThread(),mJavaRegistry.getJavaModules(this),mJavaRegistry.getCxxModules());
    FLog.w(ReactConstants.TAG,"Initializing React Xplat Bridge after initializeBridge");
    mMainExecutorToken = getMainExecutorToken();
  }

  //在C++层初始化通信桥ReactBridge
  private native void initializeBridge(
      ReactCallback callback,JavaScriptExecutor jsExecutor,MessageQueueThread jsQueue,MessageQueueThread moduleQueue,Collection<JavaModuleWrapper> javaModules,Collection<ModuleHolder> cxxModules);
}

从CatalystInstanceImpl的构建过程可以看出，CatalystInstanceImpl是个封装管理类，封装了各种注册表，以及初始化JNI，我们来看看最后初始化Bridge传入的6个参数：

ReactCallback callback：CatalystInstanceImpl的静态内部类ReactCallback，负责接口回调。
JavaScriptExecutor jsExecutor：JS执行器，将JS的调用传递给C++层。
MessageQueueThread jsQueue.getJSQueueThread()：JS线程，通过mReactQueueConfiguration.getJSQueueThread()获得，mReactQueueConfiguration通过ReactQueueConfigurationSpec.createDefault()创建。
MessageQueueThread moduleQueue：Native线程，通过mReactQueueConfiguration.getNativeModulesQueueThread()获得，mReactQueueConfiguration通过ReactQueueConfigurationSpec.createDefault()创建。
Collection<JavaModuleWrapper> javaModules：java modules，来源于mJavaRegistry.getJavaModules(this)。
Collection<ModuleHolder> cxxModules)：c++ modules，来源于mJavaRegistry.getCxxModules()。

CatalystInstanceImpl被创建以后，便进行JS的加载。从上面第5步：ReactInstanceManager.createReactContext()方法可以知道，该函数会调
用CatalystInstanceImpl.runJSBundle()来加载JS Bundle。我们开看一下它的实现。

2.7 CatalystInstanceImpl.runJSBundle()

···java
public class CatalystInstanceImpl{

@Override
public void runJSBundle() {
Assertions.assertCondition(!mJSBundleHasLoaded,“JS bundle was already loaded!”);
mJSBundleHasLoaded = true;

// incrementPendingJSCalls();
//调用加载器加载JS Bundle，不同情况下加载器各不相同。
mJSBundleLoader.loadScript(CatalystInstanceImpl.this);

synchronized (mJSCallsPendingInitLock) {
  // Loading the bundle is queued on the JS thread,but may not have
  // run yet.  It's safe to set this here,though,since any work it
  // gates will be queued on the JS thread behind the load.
  mAcceptCalls = true;

  for (PendingJSCall call : mJSCallsPendingInit) {
    jniCallJSFunction(call.mExecutorToken,call.mModule,call.mMethod,call.mArguments);
  }
  mJSCallsPendingInit.clear();
}

// This is registered after JS starts since it makes a JS call
Systrace.registerListener(mTraceListener);

}
}
···

CatalystInstanceImpl.runJSBundle()会调用JSBundleLoader去加载JS Bundle，由于不同的情况可能会有不同的JSBundleLoader，我们假设用的是第一种：

public abstract class JSBundleLoader {

  /** * This loader is recommended one for release version of your app. In that case local JS executor * should be used. JS bundle will be read from assets in native code to save on passing large * strings from java to native memory. */
  public static JSBundleLoader createAssetLoader(
      final Context context,final String assetUrl) {
    return new JSBundleLoader() {
      @Override
      public String loadScript(CatalystInstanceImpl instance) {
        instance.loadScriptFromAssets(context.getAssets(),assetUrl);
        return assetUrl;
      }
    };
  }

}

可以看出，它会继续调用CatalystInstanceImpl.loadScriptFromAssets()方法去加载JS Bundle，该方法的实现如下所示：

2.8 CatalystInstanceImpl.loadScriptFromAssets(AssetManager assetManager,String assetURL)

public class CatalystInstanceImpl {

  /* package */ void loadScriptFromAssets(AssetManager assetManager,String assetURL) {
    mSourceURL = assetURL;
    jniLoadScriptFromAssets(assetManager,assetURL);
  }

  private native void jniLoadScriptFromAssets(AssetManager assetManager,String assetURL);

}

CatalystInstanceImpl.java最终还是调用C++层的CatalystInstanceImpl.cpp去加载JS Bundle，我们去C++层看一下实现。

可以看出该方法最终调用Native方法jniLoadScriptFromAssets去加载JS Bundle，该方法的实现如下所示：

2.9 CatalystInstanceImpl::jniLoadScriptFromAssets(jni::alias_ref assetManager,const std::string& assetURL)

CatalystInstanceImpl.cpp

void CatalystInstanceImpl::jniLoadScriptFromAssets(
    jni::alias_ref<JAssetManager::javaobject> assetManager,const std::string& assetURL) {
  const int kAssetsLength = 9;  // strlen("assets://");
  //获取source js Bundle的路径名，这里默认的就是index.android.bundle
  auto sourceURL = assetURL.substr(kAssetsLength);
  //assetManager是Java层传递过来的AssetManager，调用JSLoade.cpo里的extractAssetManager()方法，extractAssetManager()再
  //调用android/asset_manager_jni.h里的AAssetManager_fromJava()方法获取AAssetManager对象。
  auto manager = react::extractAssetManager(assetManager);
  //调用JSLoader.cpp的loadScriptFromAssets()方法读取JS Bundle里的内容。
  auto script = react::loadScriptFromAssets(manager,sourceURL);
  //判断是不是unbundle命令打包，build.gradle默认里是bundle打包方式。
  if (JniJSModulesUnbundle::isUnbundle(manager,sourceURL)) {
    instance_->loadUnbundle(
      folly::make_unique<JniJSModulesUnbundle>(manager,sourceURL),std::move(script),sourceURL);
    return;
  } else {
    //bundle命令打包走次流程，instance_是Instan.h中类的实例。
    instance_->loadScriptFromString(std::move(script),sourceURL);
  }
}

接着会调用Instance.cpp的loadScriptFromString()方法去解析JS Bundle里的内容。

2.10 Instance::loadScriptFromString(std::unique_ptr string,std::string sourceURL)

Instance.cpp

void Instance::loadScriptFromString(std::unique_ptr<const JSBigString> string,std::string sourceURL) {
  callback_->incrementPendingJSCalls();
  SystraceSection s("reactbridge_xplat_loadScriptFromString","sourceURL",sourceURL);
  //nativeToJsBridge_也是在Instance::initializeBridget()方法里初始化的，具体实现在NativeToJsBridge.cpp里。
  nativeToJsBridge_->loadApplication(nullptr,std::move(string),std::move(sourceURL));
}

loadScriptFromString()进一步调用NativeToJsBridge.cpp的loadApplication()方法，它的实现如下所示：

2.11 NativeToJsBridge::loadApplication(std::unique_ptr unbundle,std::unique_ptr startupScript,std::string startupScriptSourceURL)

NativeToJsBridge.cpp

void NativeToJsBridge::loadApplication(
    std::unique_ptr<JSModulesUnbundle> unbundle,std::unique_ptr<const JSBigString> startupScript,std::string startupScriptSourceURL) {

  //获取一个MessageQueueThread，探后在线程中执行一个Task。
  runOnExecutorQueue(
      m_mainExecutorToken,[unbundleWrap=folly::makeMoveWrapper(std::move(unbundle)),startupScript=folly::makeMoveWrapper(std::move(startupScript)),startupScriptSourceURL=std::move(startupScriptSourceURL)]
        (JSExecutor* executor) mutable {

    auto unbundle = unbundleWrap.move();
    if (unbundle) {
      executor->setJSModulesUnbundle(std::move(unbundle));
    }

    //executor从runOnExecutorQueue()返回的map中取得，与OnLoad中的JSCJavaScriptExecutorHolder对应，也与
    //Java中的JSCJavaScriptExecutor对应。它的实例在JSExecutor.cpp中实现。
    executor->loadApplicationScript(std::move(*startupScript),std::move(startupScriptSourceURL));
  });
}

关于unbundle命令

<unbundle命令，使用方式和bundle命令完全相同。unbundle命令是在bundle命令的基础上增加了一项功能，除了生成整合JS文件index.android.bundle外，还会
生成各个单独的未整合JS文件（但会被优化），全部放在js-modules目录下，同时会生成一个名为UNBUNDLE的标识文件，一并放在其中。UNBUNDLE标识文件的前4个字节
固定为0xFB0BD1E5，用于加载前的校验。

我们先来看看这个函数的3个参数：

std::unique_ptr<JSModulesUnbundle> unbundle：空指针，因为我们用的bundle方式打包。
std::unique_ptr<const JSBigString> startupScript：bundle的文件内容。
std::string startupScriptSourceURL：bundle的文件名。

该函数进一步调用JSExecutor.cpp的loadApplicationScript()方法。

2.12 JSCExecutor::loadApplicationScript(std::unique_ptr script,std::string sourceURL)

到了这个方法，就是去真正加载JS文件了。

JSExecutor.cpp

void JSCExecutor::loadApplicationScript(std::unique_ptr<const JSBigString> script,std::string sourceURL) {
  SystraceSection s("JSCExecutor::loadApplicationScript",sourceURL);

  ReactMarker::logMarker("RUN_JS_BUNDLE_START");
  String jsSourceURL(m_context,sourceURL.c_str());

  // TODO t15069155: reduce the number of overrides here
#ifdef WITH_FBJSCEXTENSIONS
  if (auto fileStr = dynamic_cast<const JSBigFileString *>(script.get())) {
    JSLoadSourceStatus jsStatus;
    auto bcSourceCode = JSCreateSourceCodeFromFile(fileStr->fd(),jsSourceURL,nullptr,&jsStatus);

    switch (jsStatus) {
    case JSLoadSourceIsCompiled:
      if (!bcSourceCode) {
        throw std::runtime_error("Unexpected error opening compiled bundle");
      }

      //使用Webkit JSC去解释执行JS
      evaluateSourceCode(m_context,bcSourceCode,jsSourceURL);
      //绑定bridge，核心就是通过getGlobalObject()将JS与C++通过Webkit jSC实现绑定
      bindBridge();
      flush();

      ReactMarker::logMarker("CREATE_REACT_CONTEXT_END");
      ReactMarker::logMarker("RUN_JS_BUNDLE_END");
      return;

    case JSLoadSourceErrorVersionMismatch:
      throw RecoverableError(explainLoadSourceStatus(jsStatus));

    case JSLoadSourceErrorOnRead:
    case JSLoadSourceIsNotCompiled:
      // Not bytecode,fall through.
      break;
    }
  }
#elif defined(__APPLE__)
  BundleHeader header;
  memcpy(&header,script->c_str(),std::min(script->size(),sizeof(BundleHeader)));
  auto scriptTag = parseTypeFromHeader(header);

  if (scriptTag == ScriptTag::BCBundle) {
    using file_ptr = std::unique_ptr<FILE,decltype(&fclose)>;
    file_ptr source(fopen(sourceURL.c_str(),"r"),fclose);
    int sourceFD = fileno(source.get());

    JSValueRef jsError;
    JSValueRef result = JSC_JSEvaluateBytecodeBundle(m_context,NULL,sourceFD,&jsError);
    if (result == nullptr) {
      formatandThrowJSException(m_context,jsError,jsSourceURL);
    }
  } else
#endif
  {
    #ifdef WITH_FBSYSTRACE
    fbsystrace_begin_section(
      TRACE_TAG_REACT_CXX_BRIDGE,"JSCExecutor::loadApplicationScript-createExpectingAscii");
    #endif

    ReactMarker::logMarker("loadApplicationScript_startStringConvert");
    String jsScript = jsStringFromBigString(m_context,*script);
    ReactMarker::logMarker("loadApplicationScript_endStringConvert");

    #ifdef WITH_FBSYSTRACE
    fbsystrace_end_section(TRACE_TAG_REACT_CXX_BRIDGE);
    #endif

    evaluateScript(m_context,jsScript,jsSourceURL);
  }

  bindBridge();
  flush();

  ReactMarker::logMarker("CREATE_REACT_CONTEXT_END");
  ReactMarker::logMarker("RUN_JS_BUNDLE_END");
}

evaluateScript()方法调用Webkit jSC开始解析执行JS，并调用bindBridge()绑定bridge，我们这里主要分析的启动流程，先不分析JS渲染过程，先看看Bridge绑定
流程，bindBridge()的实现如下所示：

JSExecutor.cpp

void JSCExecutor::bindBridge() throw(JSException) {
  SystraceSection s("JSCExecutor::bindBridge");
  if (!m_delegate || !m_delegate->getModuleRegistry()) {
    return;
  }
  auto global = Object::getGlobalObject(m_context);
  auto batchedBridgeValue = global.getProperty("__fbBatchedBridge");
  if (batchedBridgeValue.isUndefined()) {
    throwJSExecutionException("Could not get BatchedBridge,make sure your bundle is packaged correctly");
  }

  auto batchedBridge = batchedBridgeValue.asObject();
  //callFunctionReturnFlushedQueue这些都是MessageQueue.js层里的方法
  m_callFunctionReturnFlushedQueueJS = batchedBridge.getProperty("callFunctionReturnFlushedQueue").asObject();
  m_invokeCallbackAndReturnFlushedQueueJS = batchedBridge.getProperty("invokeCallbackAndReturnFlushedQueue").asObject();
  //通过Webkit JSC获取MessageQueue.js的flushedQueue。
  m_flushedQueueJS = batchedBridge.getProperty("flushedQueue").asObject();
  m_callFunctionReturnResultAndFlushedQueueJS = batchedBridge.getProperty("callFunctionReturnResultAndFlushedQueue").asObject();
}

void JSCExecutor::flush() {
  SystraceSection s("JSCExecutor::flush");
  if (!m_delegate) {
    // do nothing
  } else if (!m_delegate->getModuleRegistry()) {
    callNativeModules(Value::makeNull(m_context));
  } else {
    // If this is failing,chances are you have provided a delegate with a
    // module registry,but haven't loaded the JS which enables native function
    // queueing. Add BatchedBridge.js to your bundle,pass a nullptr delegate,
    // or make delegate->getModuleRegistry() return nullptr.
    CHECK(m_flushedQueueJS) << "Attempting to use native methods without loading BatchedBridge.js";
    //m_flushedQueueJS->callAsFunction({})等于调用MessageQueue.js的flushedQUeue()方法，即把JS层相关通信数据通过flushedQUeue()
    //返回给callNativeModules
    callNativeModules(m_flushedQueueJS->callAsFunction({}));
  }
}

void JSCExecutor::callNativeModules(Value&& value) {
  SystraceSection s("JSCExecutor::callNativeModules");
  try {
    //把JS层相关通信数据转换为JSON格式
    auto calls = value.toJSONString();
    //m_delegate为JsToNativeBridge对象。
    m_delegate->callNativeModules(*this,folly::parseJson(calls),true);
  } catch (...) {
    std::string message = "Error in callNativeModules()";
    try {
      message += ":" + value.toString().str();
    } catch (...) {
      // ignored
    }
    std::throw_with_nested(std::runtime_error(message));
  }
}

m_flushedQueueJS支线的是MessageQueue.js的flushedQueue()方法，此时JS已经被加载到队列中，等待Java层来驱动它。加载完JS后
ReactContextInitAsyncTask的后台任务执行完成，进入到异步任务的onPostExecute()方法继续

JS Bundle加载并解析完成后，ReactContextInitAsyncTask的后台任务完成，进入onPostExecute()方法，我们继续跟进它的实现。

当ReactContext被创建以后，变回继续执行ReactContextInitAsyncTask.onPostExecute()方法。

2.13 ReactInstanceManager.ReactContextInitAsyncTask.onPostExecute(Result result)

public class ReactInstanceManager {

 /* * Task class responsible for (re)creating react context in the background. These tasks can only * be executing one at time,Result<ReactApplicationContext>> {

    @Override
    protected void onPostExecute(Result<ReactApplicationContext> result) {
      try {
        //设置ReacContext
        setupReactContext(result.get());
      } catch (Exception e) {
        mDevSupportManager.handleException(e);
      } finally {
        mReactContextInitAsyncTask = null;
      }

      // Handle enqueued request to re-initialize react context.
      if (mPendingReactContextInitParams != null) {
        recreateReactContextInBackground(
            mPendingReactContextInitParams.getJsExecutorFactory(),mPendingReactContextInitParams.getJsBundleLoader());
        mPendingReactContextInitParams = null;
      }
    }
}

doInBackground()做完事情之后，onPostExecute()会去调用ReactInstanceManager.setupReactContext()，它的实现如下所示：

2.14 ReactInstanceManager.setupReactContext(ReactApplicationContext reactContext)

public class ReactInstanceManager {

  private void setupReactContext(ReactApplicationContext reactContext) {
    ReactMarker.logMarker(SETUP_REACT_CONTEXT_START);
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE,"setupReactContext");
    UiThreadUtil.assertOnUiThread();
    Assertions.assertCondition(mCurrentReactContext == null);
    mCurrentReactContext = Assertions.assertNotNull(reactContext);
    CatalystInstance catalystInstance =
        Assertions.assertNotNull(reactContext.getCatalystInstance());

    //执行Native Java module的初始化
    catalystInstance.initialize();
    //重置DevSupportManager的ReactContext
    mDevSupportManager.onNewReactContextCreated(reactContext);
    //内存状态回调设置
    mMemoryPressureRouter.addMemoryPressureListener(catalystInstance);
    //复位生命周期
    moveReactContextToCurrentLifecycleState();

    //mAttachedRootViews保存的是ReactRootView
    for (ReactRootView rootView : mAttachedRootViews) {
      attachMeasuredRootViewToInstance(rootView,catalystInstance);
    }

    ReactInstanceEventListener[] listeners =
      new ReactInstanceEventListener[mReactInstanceEventListeners.size()];
    listeners = mReactInstanceEventListeners.toArray(listeners);

    for (ReactInstanceEventListener listener : listeners) {
      listener.onReactContextInitialized(reactContext);
    }
    Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
    ReactMarker.logMarker(SETUP_REACT_CONTEXT_END);
  }


  private void attachMeasuredRootViewToInstance(
      ReactRootView rootView,CatalystInstance catalystInstance) {
    Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE,"attachMeasuredRootViewToInstance");
    UiThreadUtil.assertOnUiThread();

    //移除并重置所有页面UI元素
    // Reset view content as it's going to be populated by the application content from JS
    rootView.removeAllViews();
    rootView.setId(View.NO_ID);

    //将ReactRootView作为根布局
    UIManagerModule uiManagerModule = catalystInstance.getNativeModule(UIManagerModule.class);
    int rootTag = uiManagerModule.addMeasuredRootView(rootView);
    //设置相关
    rootView.setRootViewTag(rootTag);

    //包装启动参数launchOptions与模块名jsAppModuleName
    @Nullable Bundle lau∂nchOptions与模块名 = rootView.getLaunchOptions();
    WritableMap initialProps = Arguments.makeNativeMap(launchOptions);
    String jsAppModuleName = rootView.getJSModuleName();

    WritableNativeMap appParams = new WritableNativeMap();
    appParams.putDouble("rootTag",rootTag);
    appParams.putMap("initialProps",initialProps);

    //启动流程入口：由Java层调用启动
    catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName,appParams);
    rootView.onAttachedToReactInstance();
    Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE);
  }
}

ReactInstanceManager.attachMeasuredRootViewToInstance()最终进入了RN应用的启动流程入口，调用catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName,appParams)，
AppRegistry.class是JS层暴露给Java层的接口方法。它的真正实现在AppRegistry.js里，AppRegistry.js是运行所有RN应用的JS层入口，我们来看看它的实现：

2.15 AppRegistry.runApplication(appKey: string,appParameters: any)

AppRegistry.js

//上面代码最终调用的就是这个函数
  runApplication(appKey: string,appParameters: any): void {
    const msg =
      'Running application "' + appKey + '" with appParams: ' +
      JSON.stringify(appParameters) + '. ' +
      '__DEV__ === ' + String(__DEV__) +
      ',development-level warning are ' + (__DEV__ ? 'ON' : 'OFF') +
      ',performance optimizations are ' + (__DEV__ ? 'OFF' : 'ON');
    infoLog(msg);
    BugReporting.addSource('AppRegistry.runApplication' + runCount++,() => msg);
    invariant(
      runnables[appKey] && runnables[appKey].run,'Application ' + appKey + ' has not been registered.\n\n' +
      'Hint: This error often happens when you\'re running the packager ' +
      '(local dev server) from a wrong folder. For example you have ' +
      'multiple apps and the packager is still running for the app you ' +
      'were working on before.\nIf this is the case,simply kill the old ' +
      'packager instance (e.g. close the packager terminal window) ' +
      'and start the packager in the correct app folder (e.g. cd into app ' +
      'folder and run \'npm start\').\n\n' +
      'This error can also happen due to a require() error during ' +
      'initialization or failure to call AppRegistry.registerComponent.\n\n'
    );
    runnables[appKey].run(appParameters);
  },

到这里就会去调用JS进行组件渲染，再通过Java层的UIManagerModule将JS组件转换为Android组件，最终显示在ReactRootView上。