React Native调试源码分析——远程代码加载

1、前言

    最近一直思考着如何让react native开发时分步加载js代码，而RN本身就有支持类似的功能，比如hot reload，而hot reload是根据文件的变化而进行差量加载代码的，如果需要实现分步加载的功能，就需要魔改react native相关的加载源码，因此经过几天的研究，总体了解了React Naitve调试过程中的流程，现分享给需要魔改或者了解相关源码的同学们。

   这里大致把内容分成三部分，这里先说“远程代码加载”。

2、RN远程加载的入口

   相信大家开发RN的时候经常有这样的操作——修改代码后摇一摇手机唤出rn dev弹框，点击reload重新加载。现以此为切入点，展开调试源码之旅。

UI入口源码如下：

//DevSupportManagerImpl.java

 @Override
  public void showDevOptionsDialog() {
    if (mDevOptionsDialog != null || !mIsDevSupportEnabled || ActivityManager.isUserAMonkey()) {
      return;
    }
    LinkedHashMap<String, DevOptionHandler> options = new LinkedHashMap<>();
    /* register standard options */
    options.put(
        mApplicationContext.getString(R.string.catalyst_reloadjs),
        new DevOptionHandler() {
          @Override
          public void onOptionSelected() {
            handleReloadJS();//这里重载js
          }
        });

handleReloadJS代码如下：

@Override
  public void handleReloadJS() {

    UiThreadUtil.assertOnUiThread();
    // dismiss redbox if exists
    hideRedboxDialog();

    if (mDevSettings.isRemoteJSDebugEnabled()) {
       ///略略略
    } else {
      String bundleURL =
        mDevServerHelper.getDevServerBundleURL(Assertions.assertNotNull(mJSAppBundleName));
      reloadJSFromServer(bundleURL);//从服务端reload
    }
  }

这一步生成了一个bundleURL对象，其生成过程就是根据你当前加载的js入口名进行拼接，给个例子：

http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false