react-antive 热更新

最新推荐文章于 2024-02-02 15:10:18 发布

qq_39910762

最新推荐文章于 2024-02-02 15:10:18 发布

阅读量503

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签：热更新

本文链接：https://blog.youkuaiyun.com/qq_39910762/article/details/83093146

react native 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用React Native CodePush实现应用的热更新功能，包括GitHub资源、全局安装、命令行账号注册、添加应用、项目中安装使用、自动更新代码示例、常见命令汇总，以及iOS和Android平台的具体配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GitHub：https://github.com/Microsoft/react-native-code-push

全局安装：

npm install -g code-push-cli  (Mac 加 sudo)

命令行注册账号：code-push register

然后跳转到一个网址进行注册登录，成功之后返回

添加应用：

code-push app add <appName> android react-native

名称平台

成功后如下图(这是Android下的，iOS同理)：

保存图中的 Key 后面会用到，Production(正式版) Staging(测试版)

如果没有保存，也不要紧，使用如下命令，即可进行查看：

 code-push deployment ls appName -k

结果如下图：

项目中安装使用：

npm install react-native-code-push --save

或者

yarn add react-native-code-push

安装依赖：

项目只有一个包的话可以使用命令:

react-native link

如果已经安装过的别的，例如(react-native-video等)，使用如下命令

react-native link react-native-code-push

提示输入 key ，根据对应的平台进行输入，忘记的话，可以看上面的命令：

1、项目中新建 bundles 文件夹，

mkdir bundles

2、打包：

react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false

3、更新到code-push

code-push release <appName> <updateContentsPath> <targetBinaryVersion> [options]

code-push release <appName> <bundles文件夹路径> 1.0.0 --deploymentName Production --des "新的更新" --m false

每次更新先打包bundle文件，再上传到code-push，例：

 react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false


code-push release code ./bundles/index.android.bundle 1.1.0 --deploymentName Production --des "\n1.优化列表\n2.增加文章\n3.新增内容" --m false

// 返回的结果
Successfully released an update containing the "./bundles/index.android.bundle" file to the "Production" deployment of the "code" app.

注:

1.targetBinaryVersion是指当前app的版本(对应build.gradle中设置的versionName "1.0.0")

2.默认为 staging 环境更新，若是 staging ，则不需要填写 deploymentName

3.des 更新描述

4.mandatory(--m) 是否强制更新。默认情况下mandatory为false即不强制更新

正式版更新：

1、打包成APK

cd android && ./gradlew assembleRelease

2、更改正式版的 key，在 res/values/strings.xml 中进行修改

<resources>
    <string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">对应的key</string>
    <string name="app_name">codePush</string>
</resources>

更新同上，注意将环境改为正式版: --deploymentName Production

参数

/**
 * aync 方法
 * deploymentKey 部署key
 * installMode   安装模式
 *               用在向CodePush推送更新时没有设置强制更新(mandatory为true)的情况下
 *               默认codePush.InstallMode.ON_NEXT_RESTART即下一次启动的时候安装
 * mandatoryInstallMode
 *               强制更新,默认codePush.InstallMode.IMMEDIATE
 * minimumBackgroundDuration
 *               app处于后台多少秒才进行重启已完成更新。默认为0
 *               该属性只在installMode为InstallMode.ON_NEXT_RESUME情况下有效
 * updateDialog  更新的对话框，可选
 *      -appendReleaseDescription   是否显示更新description，默认false
 *      -descriptionPrefix          更新说明的前缀。 默认是” Description: “
 *      -mandatoryContinueButtonLabel   强制更新的按钮文字. 默认 to “Continue”
 *      -mandatoryUpdateMessage     强制更新时，更新通知. Defaults to “An update is available that must be installed.”.
 *      -optionalIgnoreButtonLabel  非强制更新时，取消按钮文字. Defaults to “Ignore”
 *      -optionalInstallButtonLabel 非强制更新时，确认文字. Defaults to “Install”.
 *      -optionalUpdateMessage      非强制更新时，更新通知. Defaults to “An update is available. Would you like to install it?”
 *      -title  更新通知的标题. Defaults to “Update available”.
 */

自动更新：

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

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      download: 0,
      receivedBytes: 0,
      totalBytes: 0,
    }
  }
  componentWillMount() {
    codePush.sync(
      {
        updateDialog: {
          // 是否显示更新描述
          appendReleaseDescription: true,
          // 更新描述前缀，默认为"Description"
          descriptionPrefix: '更新内容',
          // 非强制更新
          optionalIgnoreButtonLabel: '取消',
          optionalInstallButtonLabel: '更新',
          optionalUpdateMessage: '',
          title: '更新提示',
        },
        installMode: codePush.InstallMode.IMMEDIATE,
        mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      },
      (status) => {
        switch (status) {
          case codePush.SyncStatus.UPDATE_IGNORED:
            console.log('ignored')
            break;
          case codePush.SyncStatus.DOWNLOADING_PACKAGE:
            this.setState({show: true})
            break;
          case codePush.SyncStatus.INSTALLING_UPDATE:
            this.setState({show: false})
            break;
        }
      },
      ({ receivedBytes, totalBytes }) => {
        this.setState({
          download: parseInt(receivedBytes * 100 / totalBytes),
          receivedBytes,
          totalBytes,
        })
      }
    );
  }
  render() {
    return (
      <View style={styles.container}>
        {
          this.state.show ?
          <ActivityIndicator
            size="large"
            color="#3385ff"
            animating={this.state.show}
          /> : null
        }
        <Text>App - update </Text>
        <Text>1.优化列表</Text>
        {
          this.state.show ? 
            <Text>更新中：{this.state.download}%</Text>
            :
            <Text>最新版本</Text>
        }
        <Text>已接收：{this.state.receivedBytes}</Text>
        <Text>总大小：{this.state.totalBytes}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: Platform.OS === 'ios' ? 24 : 0,
  }
});

code-push 常用命令

添加 app 项目：

code-push app add <appName> <os> <platform>

code-push app add app-amdroid android <react-native>

code-push app add MyApp ios react-native

code-push app add MyApp windows react-native

code-push app add MyApp android cordova

查看列表及删除：

code-push app remove 在账号里移除一个app

code-push app rename 重命名一个存在app

code-push app list 列出账号下面的所有app

code-push app transfer 把app的所有权转移到另外一个账号



code-push deployment rename appName 重命名

code-push deployment rm appName 删除部署

code-push deployment ls appName 列出应用的部署情况

code-push deployment ls appName -k 查看部署的key

code-push deployment history appName deploymentNmae

code-push deployment add appName deploymentNmae 新添加部署

code-push deployment rm appName deploymentNmae 删除部署

登录注销：

code-push login 登陆

code-push logout 注销

code-push access-key ls 列出登陆的

token code-push access-key rm <accessKye> 删除某个 access-key

iOS 手动配置

1、配置deployment-key的设置

用Xcode 打开项目 ➜ Xcode的项目导航视图中的PROJECT下选择你的项目 ➜ 选择Info页签 ➜ 在Configurations节点下单击 + 按钮 ➜ 选择Duplicate "Release ➜ 输入Staging(名称可以自定义取)

然后到 Build Settings 进行 key 值的填写

输入之前的 deployment-key

如果之前创建时没有保存，可用下面的命令查看部署的key

code-push deployment ls appName -k

打开 Info.plist文件，在CodePushDeploymentKey列的Value中输入$(CODEPUSH_KEY)

发布同 Android 一样，都是两步

 react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index.ios.bundle --dev false


code-push release code-ios ./bundles/index.ios.bundle 1.1.0 --deploymentName Production --des "本次更新" --m false