作者: 郭孝星
邮箱: 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)
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上。
原文链接：https://www.f2er.com/react/304132.html