当前位置：首页 > article >正文

React Native 全栈开发实战班 - 打包发布之热更新

article 2024/11/20 0:59:12

在完成 React Native 应用的开发与性能优化后，下一步就是将应用打包并发布到各大应用市场，如 Apple App Store 和 Google Play Store。本章节已经详细介绍了打包与发布的流程，包括 Android 和 iOS 平台的配置、打包步骤、签名配置以及发布到应用市场。

3. 版本更新机制

在应用发布后，持续的版本更新是保持应用稳定、功能完善和用户体验良好的关键。React Native 应用可以通过多种方式进行版本更新，包括：

全量更新（Full Update）： 用户需要下载并安装整个应用的新版本。
增量更新（Delta Update）： 只下载和安装应用中有变化的部分。
热更新（Code Push）： 通过远程服务器动态更新应用的 JavaScript 代码和资源，而无需重新发布应用。

本章节将重点介绍如何使用 CodePush 实现 React Native 应用的热更新。

3.1 热更新概述

热更新（Hot Update） 是一种在不发布新版本应用的情况下，更新应用代码和资源的技术。热更新可以显著缩短更新周期，提高用户体验，并减少应用商店审核的等待时间。

热更新的优势：

快速迭代： 可以快速发布新功能、修复 bug，无需等待应用商店审核。
用户体验： 用户无需重新下载整个应用，即可获取最新更新。
节省带宽： 只下载有变化的部分，减少用户流量消耗。

常见的热更新解决方案：

CodePush: 由 Microsoft 提供的免费开源热更新服务，支持 React Native 和 Cordova。
Expo Updates: Expo 提供的热更新服务，适用于使用 Expo 工具链的项目。
自建热更新服务: 使用第三方 CDN 或自建服务器，实现自定义的热更新流程。

本章节将重点介绍如何使用 CodePush 实现 React Native 应用的热更新。

3.2 使用 CodePush 实现热更新

CodePush 是一个由 Microsoft 提供的免费开源热更新服务，支持 React Native 和 Cordova 应用。它通过云端服务器分发应用的更新包，实现动态更新。

3.2.1 安装 CodePush CLI

首先，需要安装 CodePush CLI 工具。

npm install -g code-push-cli

3.2.2 注册 CodePush 账号

使用 CodePush CLI 注册一个 CodePush 账号。

code-push register

按照提示完成注册。

3.2.3 登录 CodePush

使用 CodePush CLI 登录。

code-push login

按照提示完成登录。

3.2.4 安装 CodePush SDK

在 React Native 项目中安装 CodePush SDK。

npm install react-native-code-push

链接原生依赖（React Native 0.60 及以上版本自动链接）：

cd ios
pod install
cd ..

3.2.5 配置 CodePush

Android 配置:

在 android/app/build.gradle 文件中，添加 CodePush 依赖：

dependencies {
    ...
    implementation project(':react-native-code-push')
    ...
}

在 android/app/src/main/java/.../MainApplication.java 文件中，添加 CodePush 配置：

import com.microsoft.codepush.react.CodePush;

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),
        ...
    );
}

在 android/app/src/main/res/values/strings.xml 文件中，添加 CodePush deployment key：

<string name="reactNativeCodePush_androidDeploymentKey">YOUR_ANDROID_DEPLOYMENT_KEY</string>

iOS 配置:

在 Xcode 中，打开项目，添加 CodePush 依赖：

打开 AppDelegate.m 文件，添加 CodePush 配置：

#import <CodePush/CodePush.h>

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
    return [CodePush bundleURL];
}

在 Info.plist 文件中，添加 CodePush deployment key：

<key>CodePushDeploymentKey</key>
<string>YOUR_IOS_DEPLOYMENT_KEY</string>

3.2.6 发布更新

构建发布版本:

npm run build:android
npm run build:ios

发布更新包:

code-push release-react <appName> <platform> -d <deploymentName> --des "更新描述"

<appName>: CodePush 应用名称。
<platform>: 平台名称，android 或 ios。
<deploymentName>: 部署环境，Staging 或 Production。

示例:

code-push release-react MyApp-Android android -d Production --des "修复bug，优化性能"
code-push release-react MyApp-iOS ios -d Production --des "修复bug，优化性能"

查看更新历史:

code-push deployment history <appName> <deploymentName>

示例:

code-push deployment history MyApp-Android Production
code-push deployment history MyApp-iOS Production

3.2.7 强制更新

可以通过设置 mandatory 参数，强制用户更新应用。

示例:

code-push release-react MyApp-Android android -d Production --des "强制更新版本" --mandatory true

3.2.8 检查更新

在应用代码中，可以通过 CodePush API 检查更新并应用更新。

示例:

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import codePush from 'react-native-code-push';

const MyApp = () => {
  const onCheckUpdate = () => {
    codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix: '\n\n更新内容:\n',
      },
      mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>欢迎使用 MyApp</Text>
      <Button title="检查更新" onPress={onCheckUpdate} />
    </View>
  );
};