首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

react native编写插件,实现热更新功能

更新日期: 2023-04-23阅读: 966标签: 热更新

react Native是一种使用JavaScript开发原生应用的框架，它可以让开发者使用一套代码同时构建Android和iOS应用。但是，React Native应用也面临着一个问题，就是如何实现热更新，即在不重新安装或发布应用的情况下，更新应用的代码或资源。


热更新的好处

热更新的好处有很多，例如：

  • 可以快速修复bug或添加新功能，提高用户体验和满意度。
  • 可以绕过应用商店的审核流程，节省时间和成本。
  • 可以灵活地控制更新的范围和时间，避免影响用户的使用。

那么，React Native如何实现热更新呢？其实，React Native的热更新并不像原生应用更新那么复杂，因为React Native应用主要由JavaScript代码和一些资源文件（如图片、字体等）组成。这些文件被打包成一个JS Bundle文件，系统加载这个文件来解析并渲染页面。所以，React Native的热更新更像是Web应用的版本更新，只需要替换JS Bundle文件和资源文件即可。


成熟的热更新服务和插件

目前，市面上已经有一些成熟的热更新服务和插件可以使用，例如：

  • CodePush：微软提供的一个免费的云端热更新服务，支持Android和iOS平台。它提供了一个命令行工具和一个React Native插件来实现热更新功能。它还提供了一些高级特性，如多渠道发布、回滚、静默更新等。
  • Pushy：国内提供的一个收费的云端热更新服务，支持Android和iOS平台。它也提供了一个命令行工具和一个React Native插件来实现热更新功能。它还提供了一些高级特性，如增量更新、灰度发布、版本控制等。

如果你想自己编写一个热更新插件来实现热更新功能，你需要了解以下几个方面：

  1. 如何检测服务器端是否有新版本的JS Bundle文件和资源文件，并获取它们的下载地址。
  2. 如何下载并解压服务器端发送的JS Bundle文件和资源文件，并保存到本地存储中。
  3. 如何修改启动配置，让系统加载本地存储中的JS Bundle文件和资源文件，而不是默认的打包在应用内的文件。
  4. 如何添加一些逻辑，用于控制热更新的时机、策略、提示等。


热更新示例代码

下面是一个简单的示例，演示如何编写一个热更新插件来实现热更新功能：

首先，在项目中安装react-native-fs模块，用于操作本地文件系统：

npm install --save react-native-fs

然后，在项目中创建一个HotReload.js文件，并引入react-native-fs模块：

import RNFS from 'react-native-fs';

接下来，在HotReload.js文件中定义一些常量，如服务器端的检查更新接口，本地存储的JS Bundle文件和资源文件的路径，以及一些默认的配置选项：

// 服务器端的检查更新接口，返回一个JSON对象，包含最新版本的信息
const CHECK_UPDATE_URL = 'https://example.com/checkUpdate';

// 本地存储的JS Bundle文件和资源文件的路径
const JS_BUNDLE_PATH = RNFS.DocumentDirectoryPath + '/main.jsbundle';
const ASSETS_PATH = RNFS.DocumentDirectoryPath + '/assets';

// 默认的配置选项，可以在初始化插件时进行修改
const DEFAULT_OPTIONS = {
  checkFrequency: 'ON_APP_START', // 检查更新的频率，可选值有'ON_APP_START'（每次启动时检查）或'ON_APP_RESUME'（每次恢复到前台时检查）
  installMode: 'ON_NEXT_RESTART', // 安装更新的模式，可选值有'ON_NEXT_RESTART'（下次启动时生效）或'IMMEDIATE'（立即生效）
  updateDialog: null, // 是否显示更新对话框，如果为null，则不显示；如果为一个对象，则显示一个自定义的对话框
};

然后，在HotReload.js文件中定义一个HotReload类，并添加一个构造函数，用于初始化插件：

class HotReload {
  constructor(options) {
    // 合并用户传入的配置选项和默认配置选项
    this.options = Object.assign({}, DEFAULT_OPTIONS, options);

    // 绑定一些事件监听器，用于检测应用的生命周期
    this.bindAppEventListeners();

    // 检查并创建本地存储的文件夹
    this.ensureLocalFolders();
  }
}

接着，在HotReload.js文件中为HotReload类添加一些方法，用于实现热更新的功能：

class HotReload { // 省略构造函数
	// 绑定一些事件监听器，用于检测应用的生命周期
	bindAppEventListeners() {
		// 监听应用启动事件
		AppRegistry.registerRunnable('hotReloadAppStart', () => {
			// 根据配置选项，决定是否在应用启动时检查更新
			if (this.options.checkFrequency === 'ON_APP_START') {
				this.checkUpdate();
			}
			// 返回一个空函数，避免报错
			return () => {};
		});
		// 监听应用恢复到前台事件
		AppState.addEventListener('change', (newState) => {
			// 根据配置选项，决定是否在应用恢复到前台时检查更新
			if (newState === 'active' && this.options.checkFrequency === 'ON_APP_RESUME') {
				this.checkUpdate();
			}
		});
	}
	// 检查并创建本地存储的文件夹
	ensureLocalFolders() {
		// 检查JS Bundle文件所在的文件夹是否存在，如果不存在，则创建
		RNFS.exists(JS_BUNDLE_PATH).then((exists) => {
			if (!exists) {
				return RNFS.mkdir(JS_BUNDLE_PATH);
			}
		}).catch((error) => {
			console.error(error);
		});
		// 检查资源文件所在的文件夹是否存在，如果不存在，则创建
		RNFS.exists(ASSETS_PATH).then((exists) => {
			if (!exists) {
				return RNFS.mkdir(ASSETS_PATH);
			}
		}).catch((error) => {
			console.error(error);
		});
	}
	// 检查服务器端是否有新版本的JS Bundle文件和资源文件，并获取它们的下载地址
	checkUpdate() {
		// 发送一个GET请求到服务器端的检查更新接口
		fetch(CHECK_UPDATE_URL).then((response) => response.json()).then((data) => {
			// 解析返回的JSON对象，获取最新版本的信息
			const {version,jsBundleUrl,assetsUrl} = data;
			// 比较本地存储的版本和服务器端的版本，如果服务器端的版本更高，则需要更新
			if (this.compareVersion(version, this.getLocalVersion()) > 0) {
				// 下载并解压服务器端发送的JS Bundle文件和资源文件，并保存到本地存储中
				this.downloadAndUnzip(jsBundleUrl, assetsUrl).then(() => {
					// 更新本地存储的版本为最新版本
					this.setLocalVersion(version);
					// 根据配置选项，决定是否显示更新对话框
					if (this.options.updateDialog) {
						// 显示一个自定义的更新对话框，让用户选择是否立即重启应用来应用更新
						this.showUpdateDialog();
					} else {
						// 根据配置选项，决定是否立即重启应用来应用更新
						if (this.options.installMode === 'IMMEDIATE') {
							this.restartApp();
						}
					}
				})
				.catch((error) => {
					console.error(error);
				});
			}
		})
		.catch((error) => {
			console.error(error);
		});
	}
	// 下载并解压服务器端发送的JS Bundle文件和资源文件，并保存到本地存储中 
	downloadAndUnzip(jsBundleUrl, assetsUrl) { //返回一个Promise对象，用于异步处理 
		return new Promise((resolve, reject) => { //下载JS Bundle文件到临时文件夹中 
			RNFS.downloadFile({
				fromUrl: jsBundleUrl,
				toFile: RNFS.TemporaryDirectoryPath + '/main.jsbundle.zip',
			}).promise.then(() => { // 解压JS Bundle文件到本地存储的文件夹中 
				return RNFS.unzip(RNFS.TemporaryDirectoryPath + '/main.jsbundle.zip',JS_BUNDLE_PATH);
			}).then(() => {
				// 删除临时文件夹中的JS Bundle文件 
				return RNFS.unlink(RNFS.TemporaryDirectoryPath + '/main.jsbundle.zip');
			}).then(() => {
				// 下载资源文件到临时文件夹中 
				return RNFS.downloadFile({
					fromUrl: assetsUrl,
					toFile: RNFS.TemporaryDirectoryPath + '/assets.zip ',
				}).promise;
			}).then(() => {
				// 解压资源文件到本地存储的文件夹中 
				return RNFS.unzip(RNFS.TemporaryDirectoryPath + '/assets.zip ', ASSETS_PATH);
			}).then(() => {
				// 删除临时文件夹中的资源文件 
				return RNFS.unlink(RNFS.TemporaryDirectoryPath + '/assets.zip');
			}).then(() => {
				// 解决Promise对象，表示下载并解压成功 
				resolve();
			}).catch((error) => {
				// 拒绝Promise对象，表示下载或解压失败 
				reject(error);
			});
		});
	}
	// 修改启动配置，让系统加载本地存储中的JS Bundle文件和资源文件，而不是默认的打包在应用内的文件 
	getJSBundleFile() { 
		// 返回本地存储中的JS Bundle文件的路径，如果不存在，则返回null 
		return RNFS.exists(JS_BUNDLE_PATH + '/main.jsbundle').then((exists) => { 
			return exists ? JS_BUNDLE_PATH + '/main.jsbundle ': null;
		});
	}
	// 添加一些逻辑，用于控制热更新的时机、策略、提示等
	showUpdateDialog() {
		// 获取更新对话框的配置对象 
		const {
			title,
			message,
			appendReleaseDescription,
			descriptionPrefix,
			mandatoryContinueButtonLabel,
			mandatoryUpdateMessage,
			optionalIgnoreButtonLabel,
			optionalInstallButtonLabel
		} = this.options.updateDialog;
		// 构建对话框的内容
		let dialogMessage = message;
		if (appendReleaseDescription) {
			// 如果需要显示更新的描述信息，就从服务器端获取最新版本的描述信息，并添加到对话框的内容中
			dialogMessage += `${descriptionPrefix} ${this.getRemoteVersionDescription()}`;
		}
		if (this.isMandatoryUpdate()) {
			// 如果是强制更新，就显示强制更新的提示信息，并只显示一个继续按钮
			dialogMessage += mandatoryUpdateMessage;
			Alert.alert(title, dialogMessage, [{
				text: mandatoryContinueButtonLabel,
				onPress: () => this.restartApp()
			}]);
		} else {
			// 如果是非强制更新，就显示两个按钮，一个是忽略按钮，一个是安装按钮
			Alert.alert(title, dialogMessage, [{
				text: optionalIgnoreButtonLabel,
				onPress: () => {}
			},
			{
				text: optionalInstallButtonLabel,
				onPress: () => this.restartApp()
			}]);
		}
	}
	// 重启应用，以应用更新 
	restartApp() { 
		RNRestart.Restart(); 
	}
	// 比较两个版本号的大小，返回-1，0，或1 
	compareVersion(v1, v2) {
		const v1Array = v1.split('.');
		const v2Array = v2.split('.');
		for (let i = 0; i < Math.max(v1Array.length, v2Array.length); i++) {
			const v1Part = parseInt(v1Array[i] || '0', 10);
			const v2Part = parseInt(v2Array[i] || '0', 10);
			if (v1Part > v2Part) {
				return 1;
			}
			if (v1Part < v2Part) {
				return -1;
			}
		}
		return 0;
	}
	// 获取本地存储的版本号，如果不存在，则返回'0.0.0' 
	getLocalVersion() { 
		return AsyncStorage.getItem('localVersion').then((value) => {
			return value || '0.0.0';
		});
	}
	// 设置本地存储的版本号为指定的版本号 
	setLocalVersion(version) { 
		return AsyncStorage.setItem('localVersion', version);
	}
	// 获取服务器端最新版本的描述信息，如果不存在，则返回空字符串 
	getRemoteVersionDescription() { 
		return AsyncStorage.getItem('remoteVersionDescription').then((value) => {
			return value || '';
		});
	}
	// 设置服务器端最新版本的描述信息为指定的描述信息 
	setRemoteVersionDescription(description) { 
		return AsyncStorage.setItem('remoteVersionDescription', description);
	}
	// 判断是否是强制更新，如果服务器端返回了isMandatory字段，并且值为true，则是强制更新 
	isMandatoryUpdate() { 
		return AsyncStorage.getItem('isMandatory').then((value) => {
			return value === 'true';
		});
	}
	// 设置是否是强制更新为指定的布尔值
	setIsMandatoryUpdate(isMandatory) {
		return AsyncStorage.setItem('isMandatory', isMandatory.toString());
	}
}

最后，在HotReload.js文件中导出HotReload类，以便在其他文件中使用：

export default HotReload;

这样，一个简单的热更新插件就编写完成了。当然，这只是一个示例，实际的热更新插件可能需要更多的功能和细节。例如，可以添加一些错误处理、日志记录、版本回滚等功能。也可以根据自己的需求和场景，修改一些逻辑和配置。


使用热更新插件

要使用这个热更新插件，只需要在项目中引入HotReload.js文件，并创建一个HotReload实例，传入一些配置选项：

import HotReload from './HotReload';

const hotReload = new HotReload({
  checkFrequency: 'ON_APP_RESUME',
  installMode: 'IMMEDIATE',
  updateDialog: {
    title: '更新提示',
    message: '有新版本可用，是否立即更新？',
    appendReleaseDescription: true,
    descriptionPrefix: '\n\n更新内容：\n',
    mandatoryContinueButtonLabel: '继续',
    mandatoryUpdateMessage: '\n\n这是一个强制更新。',
    optionalIgnoreButtonLabel: '忽略',
    optionalInstallButtonLabel: '更新',
  },
});

然后，在项目中修改启动配置，让系统加载本地存储中的JS Bundle文件和资源文件，而不是默认的打包在应用内的文件。具体方法是，在index.js文件中，将原来的AppRegistry.registerComponent方法替换为以下代码：

AppRegistry.registerComponent(appName, () => {
  return () => {
    // 调用热更新插件的getJSBundleFile方法，获取本地存储中的JS Bundle文件的路径
    hotReload.getJSBundleFile().then((jsBundleFile) => {
      // 如果存在本地存储中的JS Bundle文件，则使用它来启动应用
      if (jsBundleFile) {
        AppRegistry.registerComponent(appName, () => App);
        AppRegistry.runApplication(appName, {
          rootTag: document.getElementById('root'),
          initialProps: {},
          jsBundleFile,
        });
      } else {
        // 如果不存在本地存储中的JS Bundle文件，则使用默认的方式来启动应用
        AppRegistry.registerComponent(appName, () => App);
        AppRegistry.runApplication(appName, {
          rootTag: document.getElementById('root'),
        });
      }
    });
  };
});

这样，就可以使用自己编写的热更新插件来实现热更新功能了。当服务器端有新版本的JS Bundle文件和资源文件时，客户端会自动检测并下载，并根据配置选项决定是否重启应用来应用更新。


链接: https://www.fly63.com/article/detial/12449

上一页:  4 个 TypeScript 5.1 Beta 版重要更新内容下一页:  EventSource的理解与使用

用CodePush在React Native App中做热更新

最近在学React Native，学到了CodePush热更新。两种实现的方法，现将其记录一下。相比较原生开发，使用React Native开发App不仅能节约开发成本，还能做原生开发不能实现的热更新功能。

Webpack与Vite热更新差异对比

随着项目的日渐迭代，项目整体的代码量也会越来越多，从而导致项目体积越来越大；在Webpack时代，很多人会对历史项目（巨型项目）感到头疼，因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发HMR热更新重载页面

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!