开发环境
- 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 文件及相关资源文件放置在项目中固定位置 ，该位置在运行时无法进行更改，要实现热更新需要有两个步骤：
- 下载热更新的 bundle 及图片资源文件并放置到指定的应用的可写目录
- 启动时加载指定目录下的 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 文件夹下。
