后面会陆续写一些文章分析React Native源码，今天分析下模块加载的过程，包括系统模块和用户自定义模块的加载。源码是基于0.19.1，加载的大概流程和0.54差别不大，所以小伙伴们也不用特别纠结。
首先先看下怎么自定义Java模块给JS调用。直接用的官方的ToastAndroid的例子了。
1.自定义模块
首先创建一个原生模块，原生模块是继承了ReactContextBaseJavaModule的Java类，它可以实现一些JavaScript所需的功能。

public class ToastModule extends ReactContextBaseJavaModule {private static final String DURATION_SHORT_KEY = "SHORT"; private static final String DURATION_LONG_KEY = "LONG"; public ToastModule(ReactApplicationContext reactContext) { super(reactContext); }@Override public String getName() { return "ToastExample"; }@ReactMethod public void show(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); }}

ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串名字，这个名字在JavaScript端标记这个模块。这里我们把这个模块叫做ToastExample，这样就可以在JavaScript中通过React.NativeModules.ToastExample访问到这个模块。要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。方法的返回类型必须为void。
这样模块就定义好了，接下来就是注册这个模块了。在Java层需要注册这个模块，在应用的Package类的createNativeModules方法中添加这个模块。如果模块没有被注册，它也无法在JavaScript中被访问到。

public class AnExampleReactPackage implements ReactPackage { @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List createNativeModules( ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new ToastModule(reactContext)); return modules; }

这个package需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java.

public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }@Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new AnExampleReactPackage() ); }@Override protected String getJSMainModuleName() { return "index.android"; }@Nullable @Override protected String getBundleAssetName() { return "index.android.bundle"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }@Override public void onCreate() { super.onCreate(); MultiDex.install(this); ... } }

这样就完成了模块的注册工作了，可以看出来框架的封装做的很好，可以很好的扩展组件的定义和注册。
不知道大家有没有疑问，反正我在刚做RN的时候做完上面的步骤后是有疑问的，模块怎么被加载的？RN的界面和Android原生的界面比如Activity有什么关系？
首先来看下，RN的界面和Android原生的界面比如Activity有什么关系？
2.ReactActivity
大家都知道，在原生Android中肯定是有一个MainActivity，然后再onCreate中setContentView塞入我们在xml中定义的布局文件，这样界面就能被系统给绘制出来。那么RN的所有界面其实也可以放到一个布局文件中，只不过现在布局文件不是xml了，而是js写的文件了，然后把这个布局文件给到一个Activity中，空口无凭，去扒一扒源码。
首先在开发RN程序的时候要新建一个Activity继承于ReactActivity，比如下面这样：

public class MainActivity extends ReactActivity implements DefaultHardwareBackBtnHandler { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "TEST"; }@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); }@Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } }

首先继承ReactActivity,把生命周期交给系统进行管理，其他工作通过Delegate完成。
看下ReactActivity，其中getMainComponentName方法需要进行重写，为什么需要重写？后面在代码里面分析，这里先略过。

/** * Base Activity for React Native applications. */ public abstract class ReactActivity extends Activity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {private final ReactActivityDelegate mDelegate; protected ReactActivity() { mDelegate = createReactActivityDelegate(); }/** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. * e.g. "MoviesApp" */ protected @Nullable String getMainComponentName() { return null; }/** * Called at construction time, override if you have a custom delegate implementation. */ protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()); }@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mDelegate.onCreate(savedInstanceState); } ... }

getMainComponentName返回的名称需要和Android入口文件index.android.js里面注册的组件名称一致：

class TEST extends Component { render() { return ; } }AppRegistry.registerComponent('TEST', () => TEST);

其实到这里可以知道要渲染的组件就是TEST这个Component（RN中的组件，可以简单对等于View）。
接着返回去看ReactActivity，生命周期里面都调用ReactActivityDelegate：

protected void onCreate(Bundle savedInstanceState) { boolean needsOverlayPermission = false; //如果Android版本是M(23)也就是Android 6.0系统，在调式模式下需要弹窗获取权限 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); } }if (mMainComponentName != null && !needsOverlayPermission) { loadApp(mMainComponentName); } mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer(); }protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); }

1.mMainComponentName就是前面重写方法需要返回的，如果复写了就会进入loadApp,这就是前面需要复写该方法的原因喽
3.loadApp进行三个很重要的工作，

• 创建ReactRootView，这个是RN 的自定义根View，可以监听屏幕尺寸的变化，拦截Touch事件然后进行发送给JS层进行处理。最终会把这个View塞给activity的setContentView。看下官方的定义：

Default root view for catalyst apps. Provides the ability to listen for size changes so that a UI manager can re-layout its elements. It delegates handling touch events for itself and child views and sending those events to JS by using JSTouchDispatcher. This view is overriding {@link ViewGroup#onInterceptTouchEvent} method in order to be notified about the events for all of its children and it's also overriding {@link ViewGroup#requestDisallowInterceptTouchEvent} to make sure that {@link ViewGroup#onInterceptTouchEvent} will get events even when some child view start intercepting it. In case when no child view is interested in handling some particular touch event this view's {@link View#onTouchEvent} will still return true in order to be notified about all subsequent touch events related to that gesture (in case when JS code want to handle that gesture

• 创建ReactContext

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.

• setContentView(ReactRootView)

到这里就明白主要工作在ReactActivityDelegate中的loadApp，首先构造根View-createRootView，然后构造ReactContext上下文，渲染appKey-- mMainComponentName这里就是在index.android.js中注册的入口模块，之后将该View塞给Activity，最终Android系统将其显示到屏幕上。
3.RN框架加载Package
接下来看看Package怎么加载到RN框架中。
首先回到前面ReactActivityDelegate中的loadApp会拿到MainApplication中的ReactNativeHost：

protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); }protected ReactNativeHost getReactNativeHost() { return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost(); }

loadApp会调用getReactNativeHost().getReactInstanceManager(),接着看看ReactInstanceManager是什么，跟到ReactNativeHost中,第一次会构建ReactInstanceManager，用来管理CatalystInstance，CatalystInstance是Java/C++/JS三方通信的总管：

/** * Get the current {@link ReactInstanceManager} instance, or create one. */ public ReactInstanceManager getReactInstanceManager() { if (mReactInstanceManager == null) { mReactInstanceManager = createReactInstanceManager(); } return mReactInstanceManager; }protected ReactInstanceManager createReactInstanceManager() { ReactInstanceManagerBuilder builder = ReactInstanceManager.builder() .setApplication(mApplication) .setJSMainModulePath(getJSMainModuleName()) .setUseDeveloperSupport(getUseDeveloperSupport()) .setRedBoxHandler(getRedBoxHandler()) .setJavaScriptExecutorFactory(getJavaScriptExecutorFactory()) .setUIImplementationProvider(getUIImplementationProvider()) .setInitialLifecycleState(LifecycleState.BEFORE_CREATE); for (ReactPackage reactPackage : getPackages()) { builder.addPackage(reactPackage); }String jsBundleFile = getJSBundleFile(); if (jsBundleFile != null) { builder.setJSBundleFile(jsBundleFile); } else { builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName())); } return builder.build(); }

从上面可以看到用到了建造者模式构造 ReactInstanceManager：

/** * Builder class for {@link ReactInstanceManager} */ public class ReactInstanceManagerBuilder {private final List mPackages = new ArrayList<>(); public ReactInstanceManagerBuilder addPackage(ReactPackage reactPackage) { mPackages.add(reactPackage); return this; }public ReactInstanceManagerBuilder addPackages(List reactPackages) { mPackages.addAll(reactPackages); return this; }/** * Instantiates a new {@link ReactInstanceManagerImpl}. * Before calling {@code build}, the following must be called: *

*
• {@link #setApplication} *
• {@link #setJSBundleFile} or {@link #setJSMainModuleName} *

*/ public ReactInstanceManager build() { return new ReactInstanceManagerImpl( Assertions.assertNotNull( mApplication, "Application property has not been set with this builder"), mJSBundleFile, mJSMainModuleName, mPackages, mUseDeveloperSupport, mBridgeIdleDebugListener, Assertions.assertNotNull(mInitialLifecycleState, "Initial lifecycle state was not set"), mUIImplementationProvider, mNativeModuleCallExceptionHandler); } }

到这里系统定义的和我们自定义的ReactPackage都加载到ReactInstanceManageImpl中的mPackages中。
再返回前面ReactRootView startReactApplication,会调用mReactInstanceManager.createReactContextInBackground

//com/facebook/react/ReactRootView public void startReactApplication( ReactInstanceManager reactInstanceManager, String moduleName, @Nullable Bundle initialProperties) { Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "startReactApplication"); try { UiThreadUtil.assertOnUiThread(); if (!mReactInstanceManager.hasStartedCreatingInitialContext()) { mReactInstanceManager.createReactContextInBackground(); }attachToReactInstanceManager(); } finally { Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE); } }

接着到ReactInstanceManagerImpl中：

//com/facebool/react/ReactInstanceManagerImpl @ThreadConfined(UI) public void createReactContextInBackground() { ...... mHasStartedCreatingInitialContext = true; recreateReactContextInBackgroundInner(); }@ThreadConfined(UI) private void recreateReactContextInBackgroundInner() { ...... UiThreadUtil.assertOnUiThread(); if (mUseDeveloperSupport && mJSMainModulePath != null && !Systrace.isTracing(TRACE_TAG_REACT_APPS | TRACE_TAG_REACT_JSC_CALLS)) { final DeveloperSettings devSettings = mDevSupportManager.getDevSettings(); // If remote JS debugging is enabled, load from dev server. 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(); }

最后都会回调：

//com/facebool/react/ReactInstanceManagerImpl private void recreateReactContextInBackground( JavaScriptExecutor.Factory jsExecutorFactory, JSBundleLoader jsBundleLoader) { UiThreadUtil.assertOnUiThread(); ReactContextInitParams initParams = new ReactContextInitParams(jsExecutorFactory, jsBundleLoader); if (!mIsContextInitAsyncTaskRunning) { // No background task to create react context is currently running, create and execute one. ReactContextInitAsyncTask initTask = new ReactContextInitAsyncTask(); initTask.execute(initParams); mIsContextInitAsyncTaskRunning = true; } else { // Background task is currently running, queue up most recent init params to recreate context // once task completes. mPendingReactContextInitParams = initParams; } }

会启动一个AsyncTask来构造ReactContext：

//com/facebool/react/ReactInstanceManagerImpl /* * 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> { @Override protected void onPreExecute() { if (mCurrentReactContext != null) { tearDownReactContext(mCurrentReactContext); mCurrentReactContext = null; } }@Override protected Result doInBackground(ReactContextInitParams... params) { Assertions.assertCondition(params != null && params.length > 0 && params[0] != null); try { JavaScriptExecutor jsExecutor = params[0].getJsExecutorFactory().create(); 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); } }@Override protected void onPostExecute(Result result) { try { setupReactContext(result.get()); } catch (Exception e) { mDevSupportManager.handleException(e); } finally { mIsContextInitAsyncTaskRunning = false; } ...... } }

在doInBackground中构造ReactContext：

• 构造ReactContext
• 加载CoreModulesPackage,系统的核心模块
• 加载用户自定义Packages
• 构造NativeModuleRegistry,管理暴露给JS层的Java本地模块
• 构造JavaScriptModulesConfig，存储JS层暴露给Java调用的JS模块
• 构造CatalystInstanceImpl，三方总管
• runJSBundle

/** * @return instance of {@link ReactContext} configured a {@link CatalystInstance} set */ private ReactApplicationContext createReactContext( JavaScriptExecutor jsExecutor, JSBundleLoader jsBundleLoader) { mSourceUrl = jsBundleLoader.getSourceUrl(); NativeModuleRegistry.Builder nativeRegistryBuilder = new NativeModuleRegistry.Builder(); JavaScriptModulesConfig.Builder jsModulesBuilder = new JavaScriptModulesConfig.Builder(); //构造ReactContext ReactApplicationContext reactContext = new ReactApplicationContext(mApplicationContext); if (mUseDeveloperSupport) { reactContext.setNativeModuleCallExceptionHandler(mDevSupportManager); }//加载CoreModulesPackage Systrace.beginSection( Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "createAndProcessCoreModulesPackage"); try { CoreModulesPackage coreModulesPackage = new CoreModulesPackage(this, mBackBtnHandler, mUIImplementationProvider); processPackage(coreModulesPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); }//加载用户自定义Packages for (ReactPackage reactPackage : mPackages) { Systrace.beginSection( Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "createAndProcessCustomReactPackage"); try { processPackage(reactPackage, reactContext, nativeRegistryBuilder, jsModulesBuilder); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); } }//构造NativeModuleRegistry Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "buildNativeModuleRegistry"); NativeModuleRegistry nativeModuleRegistry; try { nativeModuleRegistry = nativeRegistryBuilder.build(); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); }//构造JavaScriptModulesConfig Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "buildJSModuleConfig"); JavaScriptModulesConfig javaScriptModulesConfig; try { javaScriptModulesConfig = jsModulesBuilder.build(); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); }... //构造CatalystInstanceImpl CatalystInstanceImpl.Builder catalystInstanceBuilder = new CatalystInstanceImpl.Builder() .setCatalystQueueConfigurationSpec(CatalystQueueConfigurationSpec.createDefault()) .setJSExecutor(jsExecutor) .setRegistry(nativeModuleRegistry) .setJSModulesConfig(javaScriptModulesConfig) .setJSBundleLoader(jsBundleLoader) .setNativeModuleCallExceptionHandler(exceptionHandler); Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "createCatalystInstance"); CatalystInstance catalystInstance; try { catalystInstance = catalystInstanceBuilder.build(); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); }...... reactContext.initializeWithInstance(catalystInstance); //runJSBundle Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE, "runJSBundle"); try { catalystInstance.runJSBundle(); } finally { Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE); }ReactMarker.logMarker("CREATE_REACT_CONTEXT_END"); return reactContext; } //加载模块 private void processPackage( ReactPackage reactPackage, ReactApplicationContext reactContext, NativeModuleRegistry.Builder nativeRegistryBuilder, JavaScriptModulesConfig.Builder jsModulesBuilder) { for (NativeModule nativeModule : reactPackage.createNativeModules(reactContext)) { nativeRegistryBuilder.add(nativeModule); } for (Class jsModuleClass : reactPackage.createJSModules()) { jsModulesBuilder.add(jsModuleClass); } }

CoreModulesPackage
封装了一些系统的核心模块，有NativeModules和JSModules

class CoreModulesPackage implements ReactPackage{ @Override public List createNativeModules( ReactApplicationContext catalystApplicationContext) { ...... return Arrays.asList( new AnimationsDebugModule( catalystApplicationContext, mReactInstanceManager.getDevSupportManager().getDevSettings()), new AndroidInfoModule(), new DeviceEventManagerModule(catalystApplicationContext, mHardwareBackBtnHandler), new ExceptionsManagerModule(mReactInstanceManager.getDevSupportManager()), new Timing(catalystApplicationContext), new SourceCodeModule( mReactInstanceManager.getSourceUrl(), mReactInstanceManager.getDevSupportManager().getSourceMapUrl()), uiManagerModule, new DebugComponentOwnershipModule(catalystApplicationContext)); }@Override public List> createJSModules() { return Arrays.asList( DeviceEventManagerModule.RCTDeviceEventEmitter.class, JSTimersExecution.class, RCTEventEmitter.class, RCTNativeAppEventEmitter.class, AppRegistry.class, com.facebook.react.bridge.Systrace.class, DebugComponentOwnershipModule.RCTDebugComponentOwnership.class); } }public interface ReactPackage {/** * @param reactContext react application context that can be used to create modules * @return list of native modules to register with the newly created catalyst instance */ List createNativeModules(ReactApplicationContext reactContext); /** * @return list of JS modules to register with the newly created catalyst instance. * * IMPORTANT: Note that only modules that needs to be accessible from the native code should be * listed here. Also listing a native module here doesn't imply that the JS implementation of it * will be automatically included in the JS bundle. */ List> createJSModules(); /** * @return a list of view managers that should be registered with {@link UIManagerModule} */ List createViewManagers(ReactApplicationContext reactContext); }

【React|React Native模块加载与原理分析】到这里就把所有的Java模块和JS模块传递给了CatalystInstanceImpl，这个是三方的中转模块，调用逻辑在这里中转。再之后就是Java<-->JS双方通信的原理了，后面专门的文章进行分析。
4.总结
整个流程其实是：

ReactActivity---> ReactActivityDelegate---> createRootView-> getReactNativeHost-> createReactInstanceManager->ReactInstanceManagerImpl recreateReactContextInBackground-> 1.构造ReactContext-> 2.加载CoreModulesPackage-> 3.加载用户自定义Packages-> 4.构造CatalystInstanceImpl-> 5.runJSBundle setContentView(mReactRootView)

React Native框架就是套一个自定义的根View-ReactRootView，在这个自定义View中创建ReactInstanceManager，ReactInstanceManager会构造ReactContext(包括JS运行环境和JSBundleLoader)，同时加载系统和用户定义的Package，构造三方通信的中转站CatalystInstanceImpl，然后解释执行JSBundle，最后getPlainActivity().setContentView(mReactRootView)塞给Activity这样RN界面就显示到屏幕上了，而这个Activity的生命周期其实还是交给Android进行管理的。
后面会接着分析RN中Java与JS的通信原理，感兴趣的小伙伴们欢迎关注。
如果文章内容能够帮到你，帮忙点赞哈。
欢迎关注公众号：JueCode

推荐阅读

• 

  美丽风景图片 唯美风景动态图片
• 

  那么多人做自媒体,发视频,我想知道咋赚钱的,真有人打赏吗？
• 

  闵行区的区号是多少
• 

  redis如何进行缓存 redis如何实现缓存
• 

  旅行，不熬鸡汤，发现有趣
• 

  你想象中的工作
• 

  视易如何更新歌曲 视易服务器怎么更新歌库
• 

  怪物猎人崛起曙光豪华版内容介绍 崛起曙光豪华版内容有什么
• 

  如何教育一个叛逆期的小孩子
• 

  佳能24-70一代和二代对比 佳能24-70对比二代
• 

  尿酸|升尿酸的食物清单已出，尿酸高的人，尽量不吃，免得被痛风找麻烦
• 

  全信通快递好吗
• 

  bbr是什么意思
• 

  跟前任切记不要问，你爱我么（）
• 

  快递寄丢了怎么找回来
• 

  高速行驶刹车踩到底 高速上如何踩刹车
• 

  离合器分离轴承换一个多少钱 分离轴承换一下多少钱
• 

  解放军总医院|4个最伤肝的行为，第2个你可能天天都在做
• 

  人的外表特征都包括哪些方面？
• 

  vip音乐如何设铃声

• SpringBoot调用公共模块的自定义注解失效的解决
• Node.js中readline模块实现终端输入
• python自定义封装带颜色的logging模块
• 解决SpringBoot引用别的模块无法注入的问题
• Python（pathlib模块）
• Apache多路复用模块（MPMs）介绍
• react|react 安装
• React.js学习笔记(17)|React.js学习笔记(17) Mobx
• React.js的表单(六)
• 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱