欢迎使用CSDN-markdown编辑器

React Native Android入门实战及深入源码分析系列(3)——热部署加载离线JSBundle文件

本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

本文为老曾原创，转载需注明出处：http://blog.csdn.net/minimicall?viewmode=contents

上两节我们已经学些了如何编译源码，这一节我们来学习如何实施热部署。也就是更新我们的应用的时候，不需要发布版本，而是把JsBundle放到服务器上，然后下载下来，进行加载。

要实现这一步骤的第一个前提就是，加载离线JsBundle。

- 默认的MainActivity

我们首先来看工程默认的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 "videolegend";
}

/**
* Returns whether dev mode should be enabled.
* This enables e.g. the dev menu.
*/
@Override
protected boolean getUseDeveloperSupport() {
// return BuildConfig.DEBUG;
return false;
}

/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
}

然而，这段代码并不能看出什么鬼。只是注册了了一个MainReactPackage而已。

但是，它继承了ReactActivity。所以，我们可以把注意力放到ReactActivity上。

- ReactActivity

在ReactActivity里面有两个方法：

/**
* Returns the name of the bundle in assets. If this is null, and no file path is specified for
* the bundle, the app will only work with {@code getUseDeveloperSupport} enabled and will
* always try to load the JS bundle from the packager server.
* 这句话很重要，如果 getUseDeveloperSupport开关被打开，那么它总是会从packager server拉取JS bundle文件。
* e.g. "index.android.bundle"
*/
protected @Nullable String getBundleAssetName() {
return "index.android.bundle";
};

/**
* Returns a custom path of the bundle file. This is used in cases the bundle should be loaded
* from a custom path. By default it is loaded from Android assets, from a path specified这句话就是说，如果你要自定义bundle加载，那么就修改这个地方的返回。
* by {@link }.getBundleAssetName
* e.g. "file://sdcard/myapp_cache/index.android.bundle"
*/
protected @Nullable String getJSBundleFile() {
Toast.makeText(this,JS_BUNDLE_LOCAL_PATH,Toast.LENGTH_SHORT);
return null;
}

上面，我已经备注了。你要从手机的/sdcard/里面加载jsbundle，必须满足两个条件：

1、getJSBundleFile这里设置好返jsbundle的路径；

2、getUseDeveloperSupport开关必须要关闭。因为如果asset里面没有jsbundle，而且开关打开了，那么程序会从packager server获取jsbundle。

根据上面两个点，我们进行改动。这里贴出我们改动后的代码。

- 改动后的MainActivity

改动后的MainActivity主要是要关闭开发支持开关。

具体代码如下：

package com.videolegend;

import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends KKReactBaseActivity {

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

/**
* Returns whether dev mode should be enabled.
* This enables e.g. the dev menu.
*/
@Override
protected boolean getUseDeveloperSupport() {
// return BuildConfig.DEBUG;关闭开发支持开关
return false;
}

/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
}

注意到这里我们的MainActivity不在是继承ReactActivity

而是继承KKReactBaseActivity，我们基本是拷贝了ReactActivity的代码。然后修改的。

package com.videolegend;

/**
* Created by zengjinlong on 16/3/30.
*/

import android.app.Activity;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.provider.Settings;
import android.util.Log;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.Toast;

import com.facebook.common.logging.FLog;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactPackage;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

import java.io.File;
import java.util.List;

import javax.annotation.Nullable;

/**
* @Author: zengjinlong
* @Date: 2016-03-30
* @purpose: 基于ReactActivity来改的，为了支持热部署，就最好支持离线bundle
*/
public abstract class KKReactBaseActivity extends Activity implements DefaultHardwareBackBtnHandler {
private static final String TAG = "KKReactBaseActivity";
private static final String REDBOX_PERMISSION_MESSAGE =
"Overlay permissions needs to be granted in order for react native apps to run in dev mode";
public static final String JS_BUNDLE_LOCAL_FILE = "videolegend.bundle";
//JS bundle的本地加载路径
public static final String JS_BUNDLE_LOCAL_PATH = Environment.getExternalStorageDirectory().toString() + File.separator + JS_BUNDLE_LOCAL_FILE;

private @Nullable
ReactInstanceManager mReactInstanceManager;
private LifecycleState mLifecycleState = LifecycleState.BEFORE_RESUME;
private boolean mDoRefresh = false;

/**
* Returns the name of the bundle in assets. If this is null, and no file path is specified for
* the bundle, the app will only work with {@code getUseDeveloperSupport} enabled and will
* always try to load the JS bundle from the packager server.
* e.g. "index.android.bundle"
*/
protected @Nullable String getBundleAssetName() {
return "index.android.bundle";
};

/**
* Returns a custom path of the bundle file. This is used in cases the bundle should be loaded
* from a custom path. By default it is loaded from Android assets, from a path specified
* by {@link }.getBundleAssetName
* e.g. "file://sdcard/myapp_cache/index.android.bundle"
*/
protected @Nullable String getJSBundleFile() {
Toast.makeText(this,JS_BUNDLE_LOCAL_PATH,Toast.LENGTH_SHORT);
return JS_BUNDLE_LOCAL_PATH;//这里返回jsbundle文件路径
// return null;
}

/**
* Returns the name of the main module. Determines the URL used to fetch the JS bundle
* from the packager server. It is only used when dev support is enabled.
* This is the first file to be executed once the {@link ReactInstanceManager} is created.
* e.g. "index.android"
*/
protected String getJSMainModuleName() {
return "index.android";
}

/**
* Returns the launchOptions which will be passed to the {@link ReactInstanceManager}
* when the application is started. By default, this will return null and an empty
* object will be passed to your top level component as its initial props.
* If your React Native application requires props set outside of JS, override
* this method to return the Android.os.Bundle of your desired initial props.
*/
protected @Nullable
Bundle getLaunchOptions() {
return null;
}

/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
* e.g. "MoviesApp"
*/
protected abstract String getMainComponentName();

/**
* Returns whether dev mode should be enabled. This enables e.g. the dev menu.
*/
protected abstract boolean getUseDeveloperSupport();

/**
* Returns a list of {@link ReactPackage} used by the app.
* You'll most likely want to return at least the {@code MainReactPackage}.
* If your app uses additional views or modules besides the default ones,
* you'll want to include more packages here.
*/
protected abstract List<ReactPackage> getPackages();

/**
* A subclass may override this method if it needs to use a custom instance.
*/
protected ReactInstanceManager createReactInstanceManager() {
ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
.setApplication(getApplication())
.setJSMainModuleName(getJSMainModuleName())
.setUseDeveloperSupport(getUseDeveloperSupport())
.setInitialLifecycleState(mLifecycleState);

for (ReactPackage reactPackage : getPackages()) {
builder.addPackage(reactPackage);
}

String jsBundleFile = getJSBundleFile();
Log.d(TAG,"jsBundleFile:"+jsBundleFile);
if (jsBundleFile != null) {
Log.d(TAG,"setJSBundleFile now");
builder.setJSBundleFile(jsBundleFile);
} else {
builder.setBundleAssetName(getBundleAssetName());
}

return builder.build();
}

/**
* A subclass may override this method if it needs to use a custom {@link ReactRootView}.
*/
protected ReactRootView createRootView() {
return new ReactRootView(this);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {
// Get permission to show redbox in dev builds.
if (!Settings.canDrawOverlays(this)) {
Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
startActivity(serviceIntent);
FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
}
}

mReactInstanceManager = createReactInstanceManager();
ReactRootView mReactRootView = createRootView();
mReactRootView.startReactApplication(mReactInstanceManager, getMainComponentName(), getLaunchOptions());
setContentView(mReactRootView);
}

@Override
protected void onPause() {
super.onPause();

mLifecycleState = LifecycleState.BEFORE_RESUME;

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}

@Override
protected void onResume() {
super.onResume();

mLifecycleState = LifecycleState.RESUMED;

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}

@Override
protected void onDestroy() {
super.onDestroy();

if (mReactInstanceManager != null) {
mReactInstanceManager.destroy();
}
}

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (mReactInstanceManager != null) {
mReactInstanceManager.onActivityResult(requestCode, resultCode, data);
}
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (mReactInstanceManager != null &&
mReactInstanceManager.getDevSupportManager().getDevSupportEnabled()) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
if (keyCode == KeyEvent.KEYCODE_R && !(getCurrentFocus() instanceof EditText)) {
// Enable double-tap-R-to-reload
if (mDoRefresh) {
mReactInstanceManager.getDevSupportManager().handleReloadJS();
mDoRefresh = false;
} else {
mDoRefresh = true;
new Handler().postDelayed(
new Runnable() {
@Override
public void run() {
mDoRefresh = false;
}
},
200);
}
}
}
return super.onKeyUp(keyCode, event);
}

@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}

这样，我们就支持了离线的jsbundle加载，这为热部署提供了支持。下面一节，我们实现我们的热部署细节。

包括版本管理。