React-Native 热更新尝试（Android）

前言：由于苹果发布的ios的一些rn的app存在安全问题，主要就是由于一些第三方的热更新库导致的，然而消息一出就闹得沸沸扬扬的，导致有些人直接认为“学了大半年的rn白学啦～～！！真是哭笑不得。废话不多说了，马上进入我们今天的主题吧。“

因为一直在做android开发，所以今天也只是针对于android进行热更新尝试（ios我也无能为力哈，看都看不懂，哈哈～～～）。

先看一下效果：

怎么样？效果还是不错的吧？其实呢，实现起来还是不是很难的，下面让我们一点一点的尝试一下吧（小伙伴跟紧一点哦）。

首先我们来看看当我们执行：

            react-native init xxxx
        

命令的时候，rn会自动帮我们创建一个android项目跟ios项目，然后我们看看rn帮我们创建的android项目长啥样：

我们看到，帮我们创建了一个MainActivity跟一个MainApplication,我们先看一下MainActivity：

            
                package com.businessstore;

import com.facebook.react.ReactActivity;

publicclassMainActivityextendsReactActivity {/**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */@Overrideprotected String getMainComponentName() {
        return"BusinessStore";
    }
}

        

很简单，就一行代码getMainComponentName，然后返回我们的组件名字，这个名字即为我们在index.android.js中注册的组件名字：

然后我们看看MainApplication长啥样：

            
                public
                
                    class
                    MainApplication
                    extends
                    Application
                    implements
                    ReactApplication {
                private
                final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @OverrideprotectedbooleangetUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

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

  @Overridepublic ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @OverridepublicvoidonCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */false);
  }
}

        

也是没有几行代码…..

好啦～那我们的rn页面是怎么出来的呢？ 不急，我们来一步一步往下看，首先点开MainActivity：

            
                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"BusinessStore";
    }
}
        

一个activity要显示一个页面的话肯定得setContentView，既然我们的activity没有，然后就找到它的父类ReactActivity：

            
                public
                abstract
                
                    class
                    ReactActivity
                    extends
                    Activity
                    implements
                    DefaultHardwareBackBtnHandler, PermissionAwareActivity {
                private
                final ReactActivityDelegate mDelegate;

  protectedReactActivity() {
    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() {
    returnnull;
  }

  /**
   * Called at construction time, override if you have a custom delegate implementation.
   */protected ReactActivityDelegate createReactActivityDelegate() {
    returnnew ReactActivityDelegate(this, getMainComponentName());
  }

  @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mDelegate.onCreate(savedInstanceState);
  }

  @OverrideprotectedvoidonPause() {
    super.onPause();
    mDelegate.onPause();
  }

  @OverrideprotectedvoidonResume() {
    super.onResume();
    mDelegate.onResume();
  }

  @OverrideprotectedvoidonDestroy() {
    super.onDestroy();
    mDelegate.onDestroy();
  }

  @OverridepublicvoidonActivityResult(int requestCode, int resultCode, Intent data) {
    mDelegate.onActivityResult(requestCode, resultCode, data);
  }

  @OverridepublicbooleanonKeyUp(int keyCode, KeyEvent event) {
    return mDelegate.onKeyUp(keyCode, event) || super.onKeyUp(keyCode, event);
  }

  @OverridepublicvoidonBackPressed() {
    if (!mDelegate.onBackPressed()) {
      super.onBackPressed();
    }
  }

  @OverridepublicvoidinvokeDefaultOnBackPressed() {
    super.onBackPressed();
  }

  @OverridepublicvoidonNewIntent(Intent intent) {
    if (!mDelegate.onNewIntent(intent)) {
      super.onNewIntent(intent);
    }
  }

  @OverridepublicvoidrequestPermissions(
    String[] permissions,
    int requestCode,
    PermissionListener listener) {
    mDelegate.requestPermissions(permissions, requestCode, listener);
  }

  @OverridepublicvoidonRequestPermissionsResult(
    int requestCode,
    String[] permissions,
    int[] grantResults) {
    mDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
  }

  protectedfinal ReactNativeHost getReactNativeHost() {
    return mDelegate.getReactNativeHost();
  }

  protectedfinal ReactInstanceManager getReactInstanceManager() {
    return mDelegate.getReactInstanceManager();
  }

  protectedfinalvoidloadApp(String appKey) {
    mDelegate.loadApp(appKey);
  }
}
        

代码也不是很多，可见，我们看到了activity的很多生命周期方法，然后都是由一个叫mDelegate的类给处理掉了，所以我们继续往下走看看mDelegate：

            
                // Copyright 2004-present Facebook. All Rights Reserved.
                package com.facebook.react;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.provider.Settings;
import android.support.v4.app.FragmentActivity;
import android.view.KeyEvent;
import android.widget.Toast;

import com.facebook.common.logging.FLog;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.Callback;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.devsupport.DoubleTapReloadRecognizer;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.modules.core.PermissionListener;

import javax.annotation.Nullable;

/**
 * Delegate class for {@link ReactActivity} and {@link ReactFragmentActivity}. You can subclass this
 * to provide custom implementations for e.g. {@link #getReactNativeHost()}, if your Application
 * class doesn‘t implement {@link ReactApplication}.
 */publicclassReactActivityDelegate {privatefinalint REQUEST_OVERLAY_PERMISSION_CODE = 1111;
  privatestaticfinal String REDBOX_PERMISSION_GRANTED_MESSAGE =
    "Overlay permissions have been granted.";
  privatestaticfinal String REDBOX_PERMISSION_MESSAGE =
    "Overlay permissions needs to be granted in order for react native apps to run in dev mode";

  privatefinal @Nullable Activity mActivity;
  privatefinal @Nullable FragmentActivity mFragmentActivity;
  privatefinal @Nullable String mMainComponentName;

  private @Nullable ReactRootView mReactRootView;
  private @Nullable DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;
  private @Nullable PermissionListener mPermissionListener;
  private @Nullable Callback mPermissionsCallback;

  publicReactActivityDelegate(Activity activity, @Nullable String mainComponentName) {
    mActivity = activity;
    mMainComponentName = mainComponentName;
    mFragmentActivity = null;
  }

  publicReactActivityDelegate(
    FragmentActivity fragmentActivity,
    @Nullable String mainComponentName) {
    mFragmentActivity = fragmentActivity;
    mMainComponentName = mainComponentName;
    mActivity = null;
  }

  protected @Nullable Bundle getLaunchOptions() {
    returnnull;
  }

  protected ReactRootView createRootView() {
    returnnew ReactRootView(getContext());
  }

  /**
   * Get the {@link ReactNativeHost} used by this app. By default, assumes
   * {@link Activity#getApplication()} is an instance of {@link ReactApplication} and calls
   * {@link ReactApplication#getReactNativeHost()}. Override this method if your application class
   * does not implement {@code ReactApplication} or you simply have a different mechanism for
   * storing a {@code ReactNativeHost}, e.g. as a static field somewhere.
   */protected ReactNativeHost getReactNativeHost() {
    return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
  }

  public ReactInstanceManager getReactInstanceManager() {
    return getReactNativeHost().getReactInstanceManager();
  }

  protectedvoidonCreate(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);
      }
    }

    if (mMainComponentName != null && !needsOverlayPermission) {
      loadApp(mMainComponentName);
    }
    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
  }

  protectedvoidloadApp(String appKey) {
    if (mReactRootView != null) {
      thrownew IllegalStateException("Cannot loadApp while app is already running.");
    }
    mReactRootView = createRootView();
    mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),
      appKey,
      getLaunchOptions());
    getPlainActivity().setContentView(mReactRootView);
  }

  protectedvoidonPause() {
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onHostPause(getPlainActivity());
    }
  }

  protectedvoidonResume() {
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onHostResume(
        getPlainActivity(),
        (DefaultHardwareBackBtnHandler) getPlainActivity());
    }

    if (mPermissionsCallback != null) {
      mPermissionsCallback.invoke();
      mPermissionsCallback = null;
    }
  }

  protectedvoidonDestroy() {
    if (mReactRootView != null) {
      mReactRootView.unmountReactApplication();
      mReactRootView = null;
    }
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onHostDestroy(getPlainActivity());
    }
  }

  publicvoidonActivityResult(int requestCode, int resultCode, Intent data) {
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager()
        .onActivityResult(getPlainActivity(), requestCode, resultCode, data);
    } else {
      // Did we request overlay permissions?if (requestCode == REQUEST_OVERLAY_PERMISSION_CODE && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        if (Settings.canDrawOverlays(getContext())) {
          if (mMainComponentName != null) {
            loadApp(mMainComponentName);
          }
          Toast.makeText(getContext(), REDBOX_PERMISSION_GRANTED_MESSAGE, Toast.LENGTH_LONG).show();
        }
      }
    }
  }

  publicbooleanonKeyUp(int keyCode, KeyEvent event) {
    if (getReactNativeHost().hasInstance() && getReactNativeHost().getUseDeveloperSupport()) {
      if (keyCode == KeyEvent.KEYCODE_MENU) {
        getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
        returntrue;
      }
      boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer)
        .didDoubleTapR(keyCode, getPlainActivity().getCurrentFocus());
      if (didDoubleTapR) {
        getReactNativeHost().getReactInstanceManager().getDevSupportManager().handleReloadJS();
        returntrue;
      }
    }
    returnfalse;
  }

  publicbooleanonBackPressed() {
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onBackPressed();
      returntrue;
    }
    returnfalse;
  }

  publicbooleanonNewIntent(Intent intent) {
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onNewIntent(intent);
      returntrue;
    }
    returnfalse;
  }

  @TargetApi(Build.VERSION_CODES.M)
  publicvoidrequestPermissions(
    String[] permissions,
    int requestCode,
    PermissionListener listener) {
    mPermissionListener = listener;
    getPlainActivity().requestPermissions(permissions, requestCode);
  }

  publicvoidonRequestPermissionsResult(
    finalint requestCode,
    final String[] permissions,
    finalint[] grantResults) {
    mPermissionsCallback = new Callback() {
      @Overridepublicvoidinvoke(Object... args) {
        if (mPermissionListener != null && mPermissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
          mPermissionListener = null;
        }
      }
    };
  }

  private Context getContext() {
    if (mActivity != null) {
      return mActivity;
    }
    return Assertions.assertNotNull(mFragmentActivity);
  }

  private Activity getPlainActivity() {
    return ((Activity) getContext());
  }
}

        

我们终于看到了一些有用的代码了，这个类就是处理跟activity生命周期相关的一些方法，包括（给activity添加contentview、监听用户回退、按键、6.0的一些运行时权限等等…）我们看到onCreate方法：

            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);
      }
    }

    if (mMainComponentName != null && !needsOverlayPermission) {
      loadApp(mMainComponentName);
    }
    mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
  }
        

我们看到这么一个判断，这个是做什么的呢？是为了检测是不是具有弹出悬浮窗的权限：

            if (getReactNativeHost().getUseDeveloperSupport() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
      // Get permission to show redbox in dev builds.
      if (!Settings.canDrawOverlays(getContext())) {
        

getReactNativeHost().getUseDeveloperSupport()返回的即为我们在MainApplication中写的：

            
                @Override
                protected
                boolean
                getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

        

也就是说，当我们运行debug包的时候，会去检测app是不是具有弹出悬浮窗的权限，没有权限的话就会去请求权限，悬浮窗即为rn的调试menu：

好啦～！有点偏离我们今天的主题了，我们继续往下走…往下我们看到会去执行一个叫loadApp的方法：

            
                if (mMainComponentName != null && !needsOverlayPermission) {
      loadApp(mMainComponentName);
    }
        

我们点开loadApp：

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

好啦～～！ 看到这里我们看到直接给activity设置了一个叫mReactRootView的组件，而这个组件正是rn封装的组件，我们在js中写的组件都会被转换成native组件，然后添加进mReactRootView这个组件中，那么问题来了，这些rn的组件又是在何时添加进我们的mReactRootView这个组件的呢？？？我们继续往下走，看到rootview有一个startReactApplication方法：

            
                public
                void
                startReactApplication(
      ReactInstanceManager reactInstanceManager,
      String moduleName,
      @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;

    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();
    }
  }
        

我们看到这么一行代码：

            if (!mReactInstanceManager.hasStartedCreatingInitialContext()) {
      mReactInstanceManager.createReactContextInBackground();
    }
        

看名字就知道肯定是加载了某些东西，可是点进去我们发现居然是一个抽象的方法，尴尬了～～！！：

            
                public
                abstract
                void
                createReactContextInBackground();
        

那么肯定有它的实现类，我们看到这个mReactInstanceManager是我们在调用loadApp这个方法的时候传进入的：

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

而mReactInstanceManager又是调用getReactNativeHost().getReactInstanceManager()方法获取的，getReactNativeHost()这个返回的对象即为我们在MainApplication中创建的host对象：

            
                public
                
                    class
                    MainApplication
                    extends
                    Application
                    implements
                    ReactApplication {
                private
                static
                final String FILE_NAME = "index.android";

    privatefinal ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        

然后我们顺着getReactNativeHost().getReactInstanceManager()一直往下找最后发现mReactInstanceManager的实现类在这里被创建了：

我们赶紧找到XReactInstanceManagerImpl类，然后看一下createReactContextInBackground这个方法：

            
                @Override
                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();
  }
        

然后我们继续往下：

            private void recreateReactContextInBackgroundInner() {
   ...
              @Override
              public void onPackagerStatusFetched(final boolean packagerIsRunning) {
                UiThreadUtil.runOnUiThread(
                    new Runnable() {
                      @Override
                      public void run() {
        ...
        recreateReactContextInBackgroundFromBundleLoader();
                        }
                      }
                    });
              }
            });
      }
      return;
    }
        

我们找到recreateReactContextInBackgroundFromBundleLoader继续往下：

            
                private
                void
                recreateReactContextInBackgroundFromBundleLoader() {
    recreateReactContextInBackground(
        new JSCJavaScriptExecutor.Factory(mJSCConfig.getConfigMap()),
        mBundleLoader);
  }
        

然后看到recreateReactContextInBackground方法：

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

    ReactContextInitParams initParams =
        new ReactContextInitParams(jsExecutorFactory, jsBundleLoader);
    if (mReactContextInitAsyncTask == null) {
      // 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 {
      // Background task is currently running, queue up most recent init params to recreate context// once task completes.
      mPendingReactContextInitParams = initParams;
    }
  }
        

recreateReactContextInBackground这就是我们今天需要找的方法，传递了两个参数：一个是执行js代码的线程池、另外一个是我们bundle文件的加载器（bundle文件可以是我们的npm服务器中的文件（debug模式），也可以是我们assert目录中的bundle文件（发布版））。

既然如此，那我们热更新方案是不是可以这样呢？
1、请求服务器接口，当接口中返回的版本号跟我们rn中存储的版本号不一致的时候，那么这个时候就需要更新版本了。
2、服务器接口返回一个jsbundle文件的下载地址，然后我们app中拿到地址下载到本地，替换掉当前版本的jsbundle文件。
3、重新执行一下recreateReactContextInBackground方法，让app重新加载新的jsbundle文件。

好啦～！ 有了思路以后，我们就可以写我们的代码了：

首先，我们模拟一个后台接口：

            {
    "url": "/business/version",
    "method": "post",
    "response": {
      "code": "0",
      "message": "请求成功",
      "body": {
        "versionName": "2.0.0",
        "description":"添加了热更新功能",
        "url":"http://www.baidu.com"
      }
    }
  },
        

然后在我们的rn中我们对应定义了一个常量叫version：

可以看到我们rn中定义的为1.0.0,所以待会我去请求接口，当接口返回的2.0.0不等于1.0.0的时候，我就去下载更新bundle文件了，于是在我们rn主页面的时候，我们就发送一个请求，然后做判断：

            componentDidMount() {
        this._versionCheck();
    }

    _versionCheck() {
        this.versionRequest = new HomeMenuRequest(null, ‘POST‘);
        this.versionRequest.start((version)=> {
            version = version.body;
            if (version && version.versionName != AppConstant.version) {
                if (Platform.OS == ‘android‘) {
                    Alert.alert(
                        ‘发现新版本,是否升级?‘,
                        `版本号: ${version.versionName}\n版本描述: ${version.description}`,
                        [
                            {
                                text: ‘是‘,
                                onPress: () => {
                                    this.setState({
                                        currProgress: Math.random() * 80,
                                        modalVisible: true
                                    });

                                    NativeModules.UpdateAndroid.doUpdate(‘index.android.bundle_2.0‘, (progress)=> {
                                        let pro = Number.parseFloat(‘‘ + progress);
                                        if (pro >= 100) {
                                            this.setState({
                                                modalVisible: false,
                                                currProgress: 100
                                            });
                                        } else {
                                            this.setState({
                                                currProgress: pro
                                            });
                                        }
                                    });
                                }
                            },
                            {
                                text: ‘否‘
                            }
                        ]
                    )
                }
            }
        }, (erroStr)=> {

        });
    }
}
        

会弹出一个对话框：

当我们点击是的时候：

             NativeModules.UpdateAndroid.doUpdate(‘index.android.bundle_2.0‘, (progress)=> {
                                        let pro = Number.parseFloat(‘‘ + progress);
                                        if (pro >= 100) {
                                            this.setState({
                                                modalVisible: false,
                                                currProgress: 100
                                            });
                                        } else {
                                            this.setState({
                                                currProgress: pro
                                            });
                                        }
                                    });
        

我们执行了native中的doUpdate并传递了两个参数，一个是下载地址，一个是当native完成热更新后的回调：

            NativeModules.UpdateAndroid.doUpdate（）
        

这里声明一下，因为我这边用的服务器是mock的服务器，所以没法放一个文件到服务器上，我就直接把需要下载的bundle_2.0放在了跟1.0同级的一个目录中了，然后我们去copy 2.0到内存卡（模拟从网络上获取），替换掉1.0的版本。

再次声明，我们发布apk的时候需要把本地的js文件打成bundle，然后丢到assets目录中，所以最初的版本应该是index.android.bundle_1.0,这里出现了一个index.android.bundle_2.0是为了模拟从服务器下载，我就直接丢在了assert目录了（正常这个文件是在我们的远程服务器中的）。

如果还不知道怎么发布apk的童鞋可以去看我前面的一篇博客：

React-Native打包发布（Android）

接下来就看看我们native的代码如何实现了….

我就直接拿发布版的例子来说了,我们首先看看我们的MainApplication中该怎么写:

            
                public
                
                    class
                    MainApplication
                    extends
                    Application
                    implements
                    ReactApplication {
                private
                static
                final String FILE_NAME = "index.android";

    privatefinal ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @OverrideprotectedbooleangetUseDeveloperSupport() {
            //这里返回false的话即为发布版，否则为测试版//发布版的话，app默认就会去assert目录中找bundle文件，// 如果为测试版的话，就回去npm服务器上获取bundle文件returnfalse;
        }

        @Overrideprotected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new VersionAndroidPackage(),
                    new UpdateAndroidPackage()
            );
        }
        @Nullable@Overrideprotected String getJSBundleFile() {
            File file = new File(getExternalCacheDir(), FILE_NAME);
            if (file != null && file.length() > 0) {
                return file.getAbsolutePath();
            }
            returnsuper.getJSBundleFile();
        }
    };

    @Overridepublic ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @OverridepublicvoidonCreate() {
        super.onCreate();
        copyBundle();
        SoLoader.init(this, /* native exopackage */false);
    }

    privatevoidcopyBundle(){
        if (!Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            return;
        }
        File file = new File(getExternalCacheDir(), FILE_NAME);
        if (file != null && file.length() > 0) {
            return;
        }
        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;
        try {
            bis = new BufferedInputStream(getAssets().open("index.android.bundle_1.0"));
            bos = new BufferedOutputStream(new FileOutputStream(file));
            int len = -1;
            byte[] buffer = newbyte[512];
            while ((len = bis.read(buffer)) != -1) {
                bos.write(buffer, 0, len);
                bos.flush();
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (bis != null) {
                    bis.close();
                }
                if (bos != null) {
                    bos.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

        

可以看到我们多重写了一个方法，然后还写了一段copy bundle文件到内存卡的代码：

            
                @Nullable
                @Override
                protected String getJSBundleFile() {
            File file = new File(getExternalCacheDir(), FILE_NAME);
            if (file != null && file.length() > 0) {
                return file.getAbsolutePath();
            }
            returnsuper.getJSBundleFile();
        }
    };
        

因为rn默认是去assert目录中加载bundle文件的，当指定了bundle文件的地址后，rn会去加载我们指定的目录。所以当我们第一次运行app的时候，我们首先把assert中的bundle文件拷贝到了内存卡，然后让rn去内存卡中加在bundle文件。

好啦～～！！此时的rn已经知道去内存卡中加载bundle文件了，我们要做的就是：
1、根据rn 中传递的地址去下载最新的bundle文件。
2、替换掉内存卡中的bundle文件。
3、调用createReactContextInBackground方法重新加载bundle文件。

至于rn怎么去跟native交互，我这里简单的说一下哈：
首先我们需要建一个叫UpdateAndroid去继承ReactContextBaseJavaModule，然后注释声明为react的module：

            
                @ReactModule(name = "UpdateAndroid")
publicclassUpdateAndroidextendsReactContextBaseJavaModule {
        

然后重写里面的一个叫getName的方法给这个module取一个名字：

            
                @Override
                public String getName() {
        return"UpdateAndroid";
    }
        

最后声明一个类方法，让rn调取：

            
                @ReactMethod
                public
                void
                doUpdate(String url, Callback callback) {
        if (task == null) {
            task = new UpdateTask(callback);
            task.execute("index.android.bundle_2.0");
        }
    }
        

全部代码：

            @ReactModule(name = "UpdateAndroid")
publicclass UpdateAndroid extends ReactContextBaseJavaModule {
    private UpdateTask task;

    publicUpdateAndroid(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @ReactMethod
    publicvoiddoUpdate(String url, Callback callback) {
        if (task == null) {
            task = new UpdateTask(callback);
            task.execute("index.android.bundle_2.0");
        }
    }

    @Override
    public String getName() {
        return"UpdateAndroid";
    }

    privateclass UpdateTask extends AsyncTask<String, Float, File> {
        private Callback callback;
        privatestatic final String FILE_NAME = "index.android";

        privateUpdateTask(Callback callback) {
            this.callback = callback;
        }

        @Override
        protected File doInBackground(String... params) {
            return downloadBundle(params[0]);
        }

        @Override
        protectedvoidonProgressUpdate(Float... values) {
//            if (callback != null && values != null && values.length > 0){//                callback.invoke(values[0]);//                Log.e("TAG", "progress-->" + values[0]);//            }
        }

        @Override
        protectedvoidonPostExecute(File file) {
            if (callback != null) callback.invoke(100f);
            //重写初始化rn组件
            onJSBundleLoadedFromServer(file);
        }

        privatevoidonJSBundleLoadedFromServer(File file) {
            if (file == null || !file.exists()) {
                Log.i(TAG, "download error, check URL or network state");
                return;
            }

            Log.i(TAG, "download success, reload js bundle");

            Toast.makeText(getCurrentActivity(), "Downloading complete", Toast.LENGTH_SHORT).show();
            try {
                ReactApplication application = (ReactApplication) getCurrentActivity().getApplication();
                Class<?> RIManagerClazz = application.getReactNativeHost().getReactInstanceManager().getClass();
                Method method = RIManagerClazz.getDeclaredMethod("recreateReactContextInBackground",
                        JavaScriptExecutor.Factory.class, JSBundleLoader.class);
                method.setAccessible(true);
                method.invoke(application.getReactNativeHost().getReactInstanceManager(),
                        new JSCJavaScriptExecutor.Factory(JSCConfig.EMPTY.getConfigMap()),
                        JSBundleLoader.createFileLoader(file.getAbsolutePath()));
            } catch (NoSuchMethodException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
            }
        }

        /**
         * 模拟bundle下载链接url
         *
         * @param url
         */private File downloadBundle(String url) {
            if (!Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
                returnnull;
            }
            //删除以前的文件
            File file = new File(getReactApplicationContext().getExternalCacheDir(), FILE_NAME);
            if (file != null && file.length() > 0) {
                file.delete();
            }
            BufferedInputStream bis = null;
            BufferedOutputStream bos = null;
            try {
                //模拟网络下载过程，我这直接放在了assert目录了long size = getReactApplicationContext().getAssets().open(url).available();
                bis = new BufferedInputStream(getReactApplicationContext().getAssets().open(url));
                bos = new BufferedOutputStream(new FileOutputStream(file));
                int len = -1;
                long total = 0;
                byte[] buffer = newbyte[100];
                while ((len = bis.read(buffer)) != -1) {
                    total += len;
                    bos.write(buffer, 0, len);
                    bos.flush();
                    float progress = total * 1.0f / size;
                    publishProgress(progress);
                }
                return file;
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (bis != null) {
                        bis.close();
                    }
                    if (bos != null) {
                        bos.close();
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            returnnull;
        }
    }
}

        

然后创建UpdateAndroidPackage类把module加入进来：

            
                
                    
                        
                            public
                            
                                class
                                UpdateAndroidPackage
                                implements
                                ReactPackage{
    @Override
    publicList<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule>modules=new ArrayList<NativeModule>();
        modules.add(new UpdateAndroid(reactContext));
        return modules;
    }

    @Override
    publicList<Class<? extendsJavaScriptModule>> createJSModules() {return Collections.emptyList();
    }

    @Override
    publicList<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}
                    
                
            
        

最后在MainApplication中把这个package注册进rn中：

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

然后我们就可以在我们的rn中调用了：

            
                                    NativeModules.UpdateAndroid.doUpdate(‘index.android.bundle_2.0‘, (progress)=> {
                                        let pro = Number.parseFloat(‘‘ + progress);
                                        if (pro >= 100) {
                                            this.setState({
                                                modalVisible: false,
                                                currProgress: 100
                                            });
                                        } else {
                                            this.setState({
                                                currProgress: pro
                                            });
                                        }
                                    });
        

好啦～～～篇幅有点长，如果还是不懂的童鞋可以私下问我哈，一起学习。

热更新android工程github链接： https://github.com/913453448/BusinessStore1