React Native 自定义 bundle 文件加载路径

开发环境

• macOS High Sierra 10.13.5
• react-native-cli: 2.0.1
• react-native: 0.55.4
• android studio: 3.1.3
• Xcode: 9.4.1 (9F2000)

先说背景

最近的项目要使用 React Native 进行开发，并且实现热更新功能，React Native 默认打包策略是将 bundle 文件及相关资源文件放置在项目中固定位置 ，该位置在运行时无法进行更改，要实现热更新需要有两个步骤：

1. 下载热更新的 bundle 及图片资源文件并放置到指定的应用的可写目录
2. 启动时加载指定目录下的 bundle 文件

本文讨论的主要内容为第 2 点，如何让 React Native 应用启动时加载指定目录下的 bundle 文件。

再说干货

1. 打包说明

打包使用 react-native bundle 命令进行打包，android 和 iOS 平台需要分别进行打包，因为打包出来的 bundle 文件及图片资源文件内容及格式有差别。

• android 打包命令

# 切换项目根目录，我本机为 ~/Documents/RNSample
cd ~/Documents/RNSample
# 有无相关目录，则执行创建文件保存目录
mkdir -p bundles/android/bundles
# 执行打包命令
react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./bundles/android/bundles/index.android.bundle --assets-dest ./bundles/android/bundles

打包命令执行成功后，bundles/android/bundles 目录中会生成如下内容

android_bundles.png

• iOS 打包命令

# 切换项目根目录，我本机为 ~/Documents/RNSample
cd ~/Documents/RNSample
# 有无相关目录，则执行创建文件保存目录
mkdir -p bundles/ios/bundles
# 执行打包命令
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./bundles/ios/bundles/index.ios.bundle --assets-dest ./bundles/ios/bundles

打包命令执行成功后，bundles/ios/bundles 目录中会生成如下内容

ios_bundles.png

打包命令参数说明
# 程序入口js文件
--entry-file
# 打包平台类型，取值 android , ios
--platform
# 是否为开发模式，默认为 true ,打包时需要设置成 false
--dev
# js bundle 文件输出路径
--bundle-output
# 图片资源输出目录
--assets-dest

以上打包成功的文件夹备用，后续需要将子目录 bundles 复制到模拟器或者设备上的指定目录中，以便 React Native 项目加载使用。

2. 代码调整

• android 处理方案

android_code_snippet.png

关键代码为，重写 ReacNativeHost 的 getJSBundleFile 方法，本例设置从SD卡根目录/bundles/index.android.bundle加载文件

    /**
     * 重写该方法，以改变 JSBundleFile 的加载路径
     * @return
     */
    @Nullable
    @Override
    protected String getJSBundleFile() {
        // 设置从 SD卡根目录/bundles/index.android.bundle 加载文件
        String path = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "bundles/index.android.bundle";
        Log.i("RN", path);
        return path;
    }

• iOS 处理方案

ios_code_snippet.png

关键代码为，重写使用react-native-cli 生成 iOS 项目中的 AppDelegate 类的 didFinishLaunchingWithOptions 方法中获取 bundle 路径的代码，本例设置从沙盒根目录/bundles/index.ios.bundle 加载文件

  NSURL *jsCodeLocation;
  // 获取应用沙盒根目录
  NSString * jsBundlePath = NSHomeDirectory();
  NSLog(@"sanbox root path = %@",jsBundlePath);
  // 调整过的加载路径，设置从 沙盒根目录/bundles/index.ios.bundle 加载文件
  jsCodeLocation = [NSURL URLWithString:[jsBundlePath stringByAppendingString:@"/bundles/index.ios.bundle"]];
  NSLog(@"new jsCodeLocation= %@",jsCodeLocation);

3. 相关文件放置说明

• android

将 index.android.bundle 文件及打包出的相关资源文件夹放置在SD卡根目录的 bundles 文件夹下。

• iOS

将 index.ios.bundle 文件及打包出的相关资源文件夹放置在沙盒根目录的 bundles 文件夹下。