【React Native 自界说热更新（iOS端）】

React Native生产环境中的热更新涉及动态分发新代码到用户设备，而无需用户通过 App Store 或 Google Play 更新。
一、更新方式选型

1. Microsoft CodePush
• 原理：CodePush 是一个基于云的服务，可以将 JavaScript 和资源包更新直接推送到用户设备。
长处：
• 避免频仍的应用商店更新。
• 更新小型功能和 Bug 修复服从高。
缺点：
• 仅支持 JavaScript 和资源更新，不实用于原生代码（如修改原生模块需要重新发布应用）
• 微软已经正式宣布 Visual Studio App Center 将于 2025 年 3 月 31 日 停止服务
2. Expo OTA Updates
• 原理：Expo 提供了开箱即用的 OTA（Over-the-Air）更新服务，无需额外的配置。
长处：
• 无需使用原生代码即可快速发布更新。
• 与 Expo 环境深度集成。
缺点：
• 需要使用 Expo 构建工具。
3. 手动资源摆设
• 将打包的资源分发到服务器，供客户端通过 HTTP 拉取。
• 避免频仍发布 App 的问题
二、步骤（手动资源摆设）

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

复制代码

1.配置入口文件，打包 React Native Bundle 和资源

React Native 默认期望入口文件名为 index.js，并且位于项目根目录
• 检查项目根目录是否存在 index.js 文件。
• 假如入口文件使用了其他名字（如 App.js 或 src/index.js），请在package.json显式指定路径：

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

复制代码

2. 打包 React Native Bundle 和资源

通过 React Native 提供的 React Native Hermes CLI 直接打包天生 Hermes 字节码格式的 .hbc 文件。
--entry-file是你的入口文件名称

1. # 终端运行：
2. # 打包 iOS 平台
3. mkdir -p ./update/assets
4. npx react-native bundle \
5.   --platform ios \
6.   --dev false \
7.   --entry-file AppEntry.js \
8.   --bundle-output ./update/index.ios.bundle \
9.   --assets-dest ./update/assets \
10.   --minify true \
11.   --reset-cache \
12.   --sourcemap-output ./update/index.ios.bundle.map \
13.   --transformer node_modules/react-native-hermes-engine/src/transformer.js
14. cd update
15. zip -r update.zip index.ios.bundle assets
17. # 打包 Android 平台
18. npx react-native bundle \
19.   --platform android \
20.   --dev false \
21.   --entry-file AppEntry.js \
22.   --bundle-output ./update/index.android.bundle \
23.   --assets-dest ./update/assets \
24.   --minify true \
25.   --reset-cache \
26.   --sourcemap-output ./update/index.android.bundle.map \
27.   --transformer node_modules/react-native-hermes-engine/src/transformer.js
28. cd update
29. zip -r update.zip index.ios.bundle assets

复制代码

假如觉得以上打包命令麻烦，可以在package.json加入以下代码，直接终端运行build-both

1. "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/",
2. "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/",
3. "build-both": "yarn build-ios && yarn build-android"

复制代码

3.将打包文件上传到服务器

打包完成后，你会得到：
• index.ios.bundle（iOS 的 JS Bundle 文件）
• index.android.bundle（Android 的 JS Bundle 文件）
• assets 目录（图片、字体等资源）
将这些文件打包成一个 ZIP 文件，比方 update_v1.0.1.zip，然后上传到你的服务器
4. App 端拉取最新的 Bundle 文件

步骤：

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

复制代码

示例：https://yourserver.com/update.json

1. {
2.   "version": "1.0.1",
3.   "url": "https://yourserver.com/updates/update_v1.0.1.zip",
4.   "md5": "a1b2c3d4e5f67890abcdef1234567890"
5. }

复制代码

5. 动态加载新的 JS Bundle 文件

依赖的第三方库

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

复制代码

yarn add react-native-zip-archive rn-fetch-blob
yarn add react-native-md5
6.下载Zip文件

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

复制代码

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

复制代码

7.解压文件

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

复制代码

*假如解压失败，查看沙盒目录下是否存在文件：Xcode查看手机沙盒文件
8.加载新的 index.ios.bundle

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

复制代码

*报错Invariant Violation: "YourAppName" has not been registered. This can happen if
检查 app.json 文件中，AppRegistry.runApplication和 AppRegistry.registerComponent 使用的名称是否一致（我的统一是是'App'）

1. ERROR  加载新版本失败 [Invariant Violation: "YourAppName" has not been registered. This can happen if:
2. * 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.
3. * A module failed to load due to an error and AppRegistry.registerComponent wasn't called.]

复制代码

*假如加载新版本的 index.ios.bundle 路径已经正确传入，热更新包也乐成存在，但现在运行组件崩溃或者非常，检查热更新包是否使用Hermes，请确保正确转换字节码。
需要确保热更新的 JS Bundle 和引擎保持一致，否则会导致 加载失败 或 桥接失效 问题
1、 确认 expo.jsEngine 的值
在你的 app.json 或 app.config.js 中，检查是否配置了 Hermes 引擎：

1. {
2.   "expo": {
3.     "jsEngine": "hermes"
4.   }
5. }

复制代码

在 ios/Podfile 中添加 Hermes 支持

1. use_react_native!(
2.   :path => config[:reactNativePath],
3.   :hermes_enabled => true
4. )

复制代码

9.源代码（仅供参考）

1、在 iOS 的 AppDelegate.mm 文件中增加支持动态加载自界说热更新的代码。
2、核心代码 放在 utils/UpdateUtil.ts 文件中，是检查更新、下载、解压、动态加载逻辑的核心文件。
3、checkForUpdate函数，根据业务需求来定入口。我是放在 App.tsx 的 useEffect 钩子里，确保应用启动时自动检查更新。
UpdateUtil.ts文件

1. /*
2. * @Date: 2024-12-16
3. * @LastEditors: min
4. * @LastEditTime: 2024-12-18 18:14:04
5. * @Description: 更新逻辑，包括检查更新、下载 ZIP 包、解压和动态加载新版本
6. */
8. import { Platform, Alert, NativeModules } from 'react-native'
9. import RNFetchBlob from 'rn-fetch-blob'
10. import { unzip } from 'react-native-zip-archive'
11. import { AppRegistry } from 'react-native'
12. import RNRestart from 'react-native-restart'
13. import { version as appVersion } from '../../package.json' // 引入package.json的version字段
14. /**
15. * 检查服务器是否有新版本
16. */
17. export const checkForUpdate = async () => {
18.   try {
19.     const updateInfo = {
20.       hasUpdate: true, // 是否有更新
21.       version: '1.5.0', // 更新的版本号
22.       description: '修复了一些已知问题并提升了性能', // 更新描述
23.       downloadUrl:
24.         'https://drive.usercontent.google.com/download?id=xxx&export=download&authuser=0', // 更新包下载地址
25.       checksum: 'abc123xyz', // 更新包的校验值，用于验证完整性
26.       isMandatory: false, // 是否是强制更新
27.     }
29.     if (updateInfo.version > appVersion) {
30.       Alert.alert('发现新版本', `更新内容：${updateInfo.description}`, [
31.         { text: '取消', style: 'cancel' },
32.         { text: '更新', onPress: () => downloadAndUpdate(updateInfo.downloadUrl) },
33.       ])
34.     }
35.   } catch (error) {
36.     console.error('检查更新失败', error)
37.   }
38. }
40. /**
41. * 下载新版本 ZIP 包并解压
42. * @param downloadUrl - 更新包下载地址
43. */
44. const downloadAndUpdate = async (downloadUrl) => {
45.   try {
46.     const { fs } = RNFetchBlob
47.     const downloadPath = `${fs.dirs.DocumentDir}/update.zip` // 指定下载文件名
48.     const extractPath = `${fs.dirs.DocumentDir}/update` // 解压后的根目录
50.     // 下载更新包
51.     const res = await RNFetchBlob.config({ path: downloadPath }).fetch('GET', downloadUrl)
53.     // 解压更新包
54.     const unzippedPath = await unzip(downloadPath, extractPath)
56.     // 拼接解压后 Bundle 文件的正确路径
57.     const bundlePath = `${extractPath}/ios/index.${Platform.OS}.bundle`
58.     console.log('加载新版本的路径:', bundlePath)
60.     // 加载新 Bundle 文件
61.     loadNewBundle(bundlePath)
62.   } catch (error) {
63.     console.error('更新失败', error)
64.   }
65. }
67. /**
68. * 动态加载新的 Bundle 文件
69. * @param bundlePath - 本地解压后的 Bundle 文件路径
70. */
71. const loadNewBundle = (bundlePath: string) => {
72.   try {
73.     // 保存新版本的 Bundle 路径到本地存储
74.     // NativeModules.SettingsManager.settings = {
75.     //   ...NativeModules.SettingsManager.settings,
76.     //   hotUpdateBundlePath: bundlePath,
77.     // }
78.     // 使用 AppRegistry 启动新 Bundle
79.     AppRegistry.runApplication('App', {
80.       rootTag: 1, // rootTag 通常是 AppRegistry 的容器 ID，1 为默认的根标签
81.       initialProps: {}, // 你可以传递 props 传递给新应用
82.     })
83.     // 强制重启应用
84.     RNRestart.Restart()
86.     console.log('加载新版本成功', bundlePath)
87.     // 强制重启应用，加载新的 Bundle
88.     RNRestart.Restart()
89.   } catch (error) {
90.     console.log('加载新版本失败', error, bundlePath)
91.   }
92. }

复制代码

AppDelegate.mm文件

1. #import <GoogleMaps/GoogleMaps.h>
2. #import "AppDelegate.h"
4. #import <React/RCTBundleURLProvider.h>
5. #import <React/RCTLinkingManager.h>
6. #import <React/RCTBridge.h>
7. #import <React/RCTBundleURLProvider.h>
8. #import <React/RCTRootView.h>
10. #import <Foundation/Foundation.h>
11. #import <React/RCTBridge.h>
12. #import <React/RCTReloadCommand.h>
14. @implementation AppDelegate
16. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
17. {
18.   [GMSServices provideAPIKey:@"AIzaSyAupzighBWDDbeLrwl5IC4HC4yu0CmlaNw"]; // Google Maps API Key
20.   self.moduleName = @"main";
22.   // You can add your custom initial props in the dictionary below.
23.   // They will be passed down to the ViewController used by React Native.
24.   self.initialProps = @{};
26.   // 调用父类方法
27.   return [super application:application didFinishLaunchingWithOptions:launchOptions];
28. }
30. - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
31. {
32. #if DEBUG
33.   // 开发模式下使用 Metro 服务器的 JS Bundle
34.   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
35. #else
36.   // 从传入的路径加载热更新的 Bundle 文件
37.   NSString *hotUpdateBundlePath = [[NSUserDefaults standardUserDefaults] stringForKey:@"hotUpdateBundlePath"];
38.   if (hotUpdateBundlePath && [[NSFileManager defaultManager] fileExistsAtPath:hotUpdateBundlePath]) {
39.     return [NSURL fileURLWithPath:hotUpdateBundlePath];
40.   } else {
41.     // 回退到默认的 Bundle 文件
42.     return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
43.   }
44. #endif
45. }
47. // 自定义热更新包加载路径
48. - (NSURL *)bundleURL
49. {
50. #if DEBUG
51.   // Debug 模式下加载 Metro 服务器
52.   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
53. #else
54.   // Release 模式下加载热更新或默认 JS Bundle
55.   NSString *hotUpdateBundlePath = [self getHotUpdateBundlePath];
56.   if (hotUpdateBundlePath != nil && [[NSFileManager defaultManager] fileExistsAtPath:hotUpdateBundlePath]) {
57.     NSURL *hotUpdateURL = [NSURL fileURLWithPath:hotUpdateBundlePath];
58.     NSLog(@"加载热更新包: %@", hotUpdateURL);
59.     return hotUpdateURL;
60.   } else {
61.     NSLog(@"加载默认 JS Bundle");
62.     return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
63.   }
64. #endif
65. }
67. // 获取热更新包路径
68. - (NSString *)getHotUpdateBundlePath
69. {
70. // 热更新包存放在沙盒中的 Documents/update 文件夹下
71. NSString *documentsPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject];
72. NSString *updateFolder = [documentsPath stringByAppendingPathComponent:@"update"];
73. NSString *bundlePath = [updateFolder stringByAppendingPathComponent:@"index.ios.bundle"];
75.   if ([[NSFileManager defaultManager] fileExistsAtPath:bundlePath]) {
76.     NSLog(@"热更新包路径存在: %@", bundlePath);
77.     return bundlePath;
78.   } else {
79.     NSLog(@"热更新包路径不存在: %@", bundlePath);
80.     return nil;
81.   }
82. }
84. // 重新加载 JS Bundle
85. - (void)reloadJSBundle {
86.   NSLog(@"开始重新加载 JS Bundle...");
88.   NSURL *bundleURL = [self sourceURLForBridge:nil];
89.   if (bundleURL == nil) {
90.     NSLog(@"无法加载 JS Bundle，路径为空");
91.     return;
92.   }
94.   RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL
95.                                            moduleProvider:nil
96.                                             launchOptions:nil];
97.   if (bridge) {
98.     NSLog(@"JS Bundle 重新加载成功");
99.     [bridge reload];
100.   } else {
101.     NSLog(@"创建 RCTBridge 失败");
102.   }
103. }
105. // Linking API
106. - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
107.   return [super application:application openURL:url options:options] || [RCTLinkingManager application:application openURL:url options:options];
108. }
110. // Universal Links
111. - (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
112.   BOOL result = [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
113.   return [super application:application continueUserActivity:userActivity restorationHandler:restorationHandler] || result;
114. }
116. // Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
117. - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
118. {
119.   return [super application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
120. }
122. // Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
123. - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
124. {
125.   return [super application:application didFailToRegisterForRemoteNotificationsWithError:error];
126. }
128. // Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
129. - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
130. {
131.   return [super application:application didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
132. }
134. @end

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。