【React Native 自界说热更新（iOS端）】 - qidao123.com技术社区-IT企服评测·应用市场

**** 主要流程 ****
1. 打包更新文件（JS Bundle 和资源） → 上传到服务器
2. 服务器维护一个 JSON 文件 → 包含最新版本信息和下载链接
3. App 启动时检查更新 → 下载 ZIP 文件 → 解压并保存 → 替换本地 JS Bundle 文件
4. 动态加载新的 JS Bundle 文件

复制代码

import { AppRegistry } from 'react-native'
import { registerRootComponent } from 'expo'
import App from './App'
AppRegistry.registerComponent('App', () => App)
registerRootComponent(App)

复制代码

# 终端运行：
# 打包 iOS 平台
mkdir -p ./update/assets
npx react-native bundle \
--platform ios \
--dev false \
--entry-file AppEntry.js \
--bundle-output ./update/index.ios.bundle \
--assets-dest ./update/assets \
--minify true \
--reset-cache \
--sourcemap-output ./update/index.ios.bundle.map \
--transformer node_modules/react-native-hermes-engine/src/transformer.js
cd update
zip -r update.zip index.ios.bundle assets
# 打包 Android 平台
npx react-native bundle \
--platform android \
--dev false \
--entry-file AppEntry.js \
--bundle-output ./update/index.android.bundle \
--assets-dest ./update/assets \
--minify true \
--reset-cache \
--sourcemap-output ./update/index.android.bundle.map \
--transformer node_modules/react-native-hermes-engine/src/transformer.js
cd update
zip -r update.zip index.ios.bundle assets

复制代码

"build-ios": "rm -rf ~/Desktop/output/ios_update && mkdir -p ~/Desktop/output/ios_update/assets && npx react-native bundle --platform ios --dev false --entry-file AppEntry.js --bundle-output ~/Desktop/output/ios_update/index.ios.bundle --assets-dest ~/Desktop/output/ios_update/assets --minify true --reset-cache --sourcemap-output ~/Desktop/output/ios_update/index.ios.bundle.map --transformer node_modules/react-native-hermes-engine/src/transformer.js && cd ~/Desktop/output/ios_update && zip -r ios_update.zip index.ios.bundle assets && mv ios_update.zip ~/Desktop/output/",
"build-android": "rm -rf ~/Desktop/output/android_update && mkdir -p ~/Desktop/output/android_update/assets && npx react-native bundle --platform android --dev false --entry-file AppEntry.js --bundle-output ~/Desktop/output/android_update/index.android.bundle --assets-dest ~/Desktop/output/android_update/assets --minify true --reset-cache --sourcemap-output ~/Desktop/output/android_update/index.android.bundle.map --transformer node_modules/react-native-hermes-engine/src/transformer.js && cd ~/Desktop/output/android_update && zip -r android_update.zip index.android.bundle assets && mv android_update.zip ~/Desktop/output/",
"build-both": "yarn build-ios && yarn build-android"

复制代码

1. 在服务器维护一个配置文件（JSON 文件），记录当前最新版本的热更新包信息（版本号、下载链接、MD5 校验值等）。

复制代码

{
"version": "1.0.1",
"url": "https://yourserver.com/updates/update_v1.0.1.zip",
"md5": "a1b2c3d4e5f67890abcdef1234567890"
}

复制代码

1. react-native-zip-archive：用于解压下载的更新包
2. rn-fetch-blob：用于下载更新包。
3. react-native-md5（可选）：用于校验 MD5

复制代码

• 目标路径：你应该将 index.ios.bundle 和 assets 放置到应用能够访问到的位置，通常是沙盒目录下的某个文件夹。
• index.ios.bundle 应该放置到 FileSystem.documentDirectory 或其他可访问的目录。
• assets 文件夹也应放置到同样的路径下，确保资源能够被引用。

复制代码

// 指定下载文件名
const downloadPath = `${fs.dirs.DocumentDir}/update.zip`
// 解压后的根目录
const extractPath = `${fs.dirs.DocumentDir}/update`

复制代码

// 解压更新包
const unzippedPath = await unzip(downloadPath, extractPath)
// 拼接解压后 Bundle 文件的正确路径
const bundlePath = `${extractPath}/ios/index.${Platform.OS}.bundle`

复制代码

// 使用 AppRegistry 启动新 Bundle
AppRegistry.runApplication('App', {
rootTag: 1, // rootTag 通常是 AppRegistry 的容器 ID，1 为默认的根标签
initialProps: {}, // 你可以传递 props 传递给新应用
})
// 强制重启应用
RNRestart.Restart()

复制代码

ERROR 加载新版本失败 [Invariant Violation: "YourAppName" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and AppRegistry.registerComponent wasn't called.]

复制代码

{
"expo": {
"jsEngine": "hermes"
}
}

复制代码

use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => true
)

复制代码

/*
* @Date: 2024-12-16
* @LastEditors: min
* @LastEditTime: 2024-12-18 18:14:04
* @Description: 更新逻辑，包括检查更新、下载 ZIP 包、解压和动态加载新版本
*/
import { Platform, Alert, NativeModules } from 'react-native'
import RNFetchBlob from 'rn-fetch-blob'
import { unzip } from 'react-native-zip-archive'
import { AppRegistry } from 'react-native'
import RNRestart from 'react-native-restart'
import { version as appVersion } from '../../package.json' // 引入package.json的version字段
/**
* 检查服务器是否有新版本
*/
export const checkForUpdate = async () => {
try {
const updateInfo = {
hasUpdate: true, // 是否有更新
version: '1.5.0', // 更新的版本号
description: '修复了一些已知问题并提升了性能', // 更新描述
downloadUrl:
'https://drive.usercontent.google.com/download?id=xxx&export=download&authuser=0', // 更新包下载地址
checksum: 'abc123xyz', // 更新包的校验值，用于验证完整性
isMandatory: false, // 是否是强制更新
}
if (updateInfo.version > appVersion) {
Alert.alert('发现新版本', `更新内容：${updateInfo.description}`, [
{ text: '取消', style: 'cancel' },
{ text: '更新', onPress: () => downloadAndUpdate(updateInfo.downloadUrl) },
])
}
} catch (error) {
console.error('检查更新失败', error)
}
}
/**
* 下载新版本 ZIP 包并解压
* @param downloadUrl - 更新包下载地址
*/
const downloadAndUpdate = async (downloadUrl) => {
try {
const { fs } = RNFetchBlob
const downloadPath = `${fs.dirs.DocumentDir}/update.zip` // 指定下载文件名
const extractPath = `${fs.dirs.DocumentDir}/update` // 解压后的根目录
// 下载更新包
const res = await RNFetchBlob.config({ path: downloadPath }).fetch('GET', downloadUrl)
// 解压更新包
const unzippedPath = await unzip(downloadPath, extractPath)
// 拼接解压后 Bundle 文件的正确路径
const bundlePath = `${extractPath}/ios/index.${Platform.OS}.bundle`
console.log('加载新版本的路径:', bundlePath)
// 加载新 Bundle 文件
loadNewBundle(bundlePath)
} catch (error) {
console.error('更新失败', error)
}
}
/**
* 动态加载新的 Bundle 文件
* @param bundlePath - 本地解压后的 Bundle 文件路径
*/
const loadNewBundle = (bundlePath: string) => {
try {
// 保存新版本的 Bundle 路径到本地存储
// NativeModules.SettingsManager.settings = {
// ...NativeModules.SettingsManager.settings,
// hotUpdateBundlePath: bundlePath,
// }
// 使用 AppRegistry 启动新 Bundle
AppRegistry.runApplication('App', {
rootTag: 1, // rootTag 通常是 AppRegistry 的容器 ID，1 为默认的根标签
initialProps: {}, // 你可以传递 props 传递给新应用
})
// 强制重启应用
RNRestart.Restart()
console.log('加载新版本成功', bundlePath)
// 强制重启应用，加载新的 Bundle
RNRestart.Restart()
} catch (error) {
console.log('加载新版本失败', error, bundlePath)
}
}

复制代码

#import <GoogleMaps/GoogleMaps.h>
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTLinkingManager.h>
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Foundation/Foundation.h>
#import <React/RCTBridge.h>
#import <React/RCTReloadCommand.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[GMSServices provideAPIKey:@"AIzaSyAupzighBWDDbeLrwl5IC4HC4yu0CmlaNw"]; // Google Maps API Key
self.moduleName = @"main";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
// 调用父类方法
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
// 开发模式下使用 Metro 服务器的 JS Bundle
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
// 从传入的路径加载热更新的 Bundle 文件
NSString *hotUpdateBundlePath = [[NSUserDefaults standardUserDefaults] stringForKey:@"hotUpdateBundlePath"];
if (hotUpdateBundlePath && [[NSFileManager defaultManager] fileExistsAtPath:hotUpdateBundlePath]) {
return [NSURL fileURLWithPath:hotUpdateBundlePath];
} else {
// 回退到默认的 Bundle 文件
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
}
#endif
}
// 自定义热更新包加载路径
- (NSURL *)bundleURL
{
#if DEBUG
// Debug 模式下加载 Metro 服务器
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
// Release 模式下加载热更新或默认 JS Bundle
NSString *hotUpdateBundlePath = [self getHotUpdateBundlePath];
if (hotUpdateBundlePath != nil && [[NSFileManager defaultManager] fileExistsAtPath:hotUpdateBundlePath]) {
NSURL *hotUpdateURL = [NSURL fileURLWithPath:hotUpdateBundlePath];
NSLog(@"加载热更新包: %@", hotUpdateURL);
return hotUpdateURL;
} else {
NSLog(@"加载默认 JS Bundle");
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
}
#endif
}
// 获取热更新包路径
- (NSString *)getHotUpdateBundlePath
{
// 热更新包存放在沙盒中的 Documents/update 文件夹下
NSString *documentsPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject];
NSString *updateFolder = [documentsPath stringByAppendingPathComponent:@"update"];
NSString *bundlePath = [updateFolder stringByAppendingPathComponent:@"index.ios.bundle"];
if ([[NSFileManager defaultManager] fileExistsAtPath:bundlePath]) {
NSLog(@"热更新包路径存在: %@", bundlePath);
return bundlePath;
} else {
NSLog(@"热更新包路径不存在: %@", bundlePath);
return nil;
}
}
// 重新加载 JS Bundle
- (void)reloadJSBundle {
NSLog(@"开始重新加载 JS Bundle...");
NSURL *bundleURL = [self sourceURLForBridge:nil];
if (bundleURL == nil) {
NSLog(@"无法加载 JS Bundle，路径为空");
return;
}
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL
moduleProvider:nil
launchOptions:nil];
if (bridge) {
NSLog(@"JS Bundle 重新加载成功");
[bridge reload];
} else {
NSLog(@"创建 RCTBridge 失败");
}
}
// Linking API
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
return [super application:application openURL:url options:options] || [RCTLinkingManager application:application openURL:url options:options];
}
// Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
BOOL result = [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
return [super application:application continueUserActivity:userActivity restorationHandler:restorationHandler] || result;
}
// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
return [super application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
return [super application:application didFailToRegisterForRemoteNotificationsWithError:error];
}
// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
return [super application:application didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
@end

复制代码