ReactNative 热更新，集成CodePush

2024-06-03 05:58
文章标签 更新 集成 reactnative codepush

本文主要是介绍ReactNative 热更新，集成CodePush，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

开篇先介绍另外一种热更新方式：pushy， 这是rn中文网推荐的，phshy集成方法

CodePush简介

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新 (JS, HTML, CSS and images)，应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性，也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候，不需要经过二进制打包，可以直接推送代码进行实时更新。

CodePush 可以进行实时的推送代码更新：

  • 直接对用户部署代码更新
  • 管理 Alpha，Beta 和生产环境应用
  • 支持 React Native 和 Cordova
  • 支持JavaScript 文件与图片资源的更新
  • CodePush开源了react-native版本，react-native-code-push托管在GitHub上。

CodePush 安装与注册

1.安装 CodePush CLI

使用命令 npm install -g code-push-cli 安装CodePush终端

2.注册CodePush 账号

在终端输入code-push register，会打开注册页面让你选择授权账号
然后终端输入code-push login进行登陆

授权完成后，CodePush会显示你的Access Key，复制输入到终端即可完成注册并登陆。
ps.只要不主动退出(通过code-push logout命令)，登陆状态会一直有效。
相关命令:

  • code-push login 登陆
  • code-push loout 注销
  • code-push access-key ls 列出登陆的token
  • code-push access-key rm 删除某个 access-key
  • code-push rename 重命名已经存在App
  • code-push list 列出与你账户关联的所有App
3.在CodePush服务器注册app

在终端输入code-push app add <appName> <os> <platform>即可完成注册。
我这边输入的是：code-push app add ReactNativeCodePush android react-native

  • os参数为 ： ios, windows , android
  • platform参数为：react-native , cordova

Examples:

  app add MyApp ios react-native      Adds app "MyApp", indicating that it's an iOS React Native appapp add MyApp windows react-native  Adds app "MyApp", indicating that it's a Windows ReactNative appapp add MyApp android cordova       Adds app "MyApp", indicating that it's an Android Cordova app

注册完成之后会返回一套deployment key，该key在后面步骤中会用到。

集成CodePush SDK

第一步：在项目中安装 react-native-code-push插件
npm install --save react-native-code-push
第二步：在Android project中安装插件。

运行rnpm link react-native-code-push 这条命令将会自动帮我们在anroid文件中添加好设置。

CodePush提供了两种方式：RNPM 和 Manual，本次演示所使用的是RNPM。 
如果rnpm命令无法执行(rn0.26以后集成到了react-native-cli中)，请安装：运行`npm i -g rnpm`，来安装RNPM。
Android集成

1 打开android/app/build.gradle文件，修改android-buildTypes节点成如下

...buildTypes {debug{//省略了其他配置buildConfigField "String", "CODEPUSH_KEY", '""'}releaseStaging {buildConfigField "String", "CODEPUSH_KEY", '"此处填写Staging key"'}release {//省略了其他配置buildConfigField "String", "CODEPUSH_KEY", '"此处填写Production key"'}}
...

2 在android/app/build.gradle设置好deployment-key之后呢,我们就可以这样使用了:

···
import com.microsoft.codepush.react.CodePush;  // 引入codepush
···@Override
protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(...new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // 添加这一行 BuildConfig.CODEPUSH_KEY记得要在对应位置把key加进去...);
}

3 修改versionName。
在 android/app/build.gradle中有个 android.defaultConfig.versionName属性，我们需要把 应用版本改成 1.0.0（默认是1.0，但是codepush需要三位数）。

android{
···defaultConfig{···versionName "1.0.0"···}
···
}

至此Code Push for Android的SDK已经集成完成。

使用react-native-code-psuh进行热更新

在app.js如下写：

/*** Created by 卓原 on 2018/5/16.**/import React, {Component} from 'react';
import {StyleSheet,Text,View,TouchableOpacity,Alert
} from 'react-native';import codePush from 'react-native-code-push';type Props = {};export default class App extends Component<Props> {componentDidMount() {this.codePushUpdate()}/*** 远程服务检测更新* IMMEDIATE(0) // 更新完毕，立即生效* ON_NEXT_RESTART(1) // 下次启动生效* ON_NEXT_RESUME(2) // 切到后台，重新回来生效*/codePushUpdate() {codePush.sync({installMode: codePush.InstallMode.IMMEDIATE,updateDialog: true},(status) => {switch (status) {case codePush.SyncStatus.CHECKING_FOR_UPDATE:alert('codePush.SyncStatus.CHECKING_FOR_UPDATE');break;case codePush.SyncStatus.AWAITING_USER_ACTION:alert('codePush.SyncStatus.AWAITING_USER_ACTION');break;case codePush.SyncStatus.DOWNLOADING_PACKAGE:alert('codePush.SyncStatus.DOWNLOADING_PACKAGE');break;case codePush.SyncStatus.INSTALLING_UPDATE:alert('codePush.SyncStatus.INSTALLING_UPDATE');break;case codePush.SyncStatus.UP_TO_DATE:alert('codePush.SyncStatus.UP_TO_DATE');break;case codePush.SyncStatus.UPDATE_IGNORED:alert('codePush.SyncStatus.UPDATE_IGNORED');break;case codePush.SyncStatus.UPDATE_INSTALLED:alert('codePush.SyncStatus.UPDATE_INSTALLED');break;case codePush.SyncStatus.SYNC_IN_PROGRESS:alert('codePush.SyncStatus.SYNC_IN_PROGRESS');break;case codePush.SyncStatus.UNKNOWN_ERROR:alert('codePush.SyncStatus.UNKNOWN_ERROR');break;}},({receivedBytes, totalBytes,}) => {alert('receivedBytes / totalBytes: ------------    ' + receivedBytes + '/' + totalBytes);});}/*** 更新方法*/onButtonPress = () => {codePush.sync({updateDialog: true,installMode: codePush.InstallMode.IMMEDIATE});};render() {return (<View style={styles.container}><Text style={styles.welcome}>Welcome to React Native CodePush2.22222!</Text><TouchableOpacity onPress={this.onButtonPress}><Text>Check for updates</Text></TouchableOpacity></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});

然后就是安装release的apk了
1. 打包bundle文件：

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/
  1. 打离线包并安装：
    建议看此链接

实现热更新

修改app.js的内容，
再打bundle包并 重新发布：
打bundle包步骤同上面步骤1

发布新的bundle：

code-push release ReactNativeCodePush ./android/app/src/main/assets/index.android.bundle 1.0.0 --deploymentName Production --description "1。rn更新" --mandatory true

此时 重新打开app即可。
demo地址

大坑：发布bundle时，版本号要填写当前应用版本号，而不是未来版本号，否则不会更新，调试了几个小时 ，就因为这个原因!

参数：

CodePushOptions
checkFrequency (codePush.CheckFrequency) - 检测更新的时机
方法  描述
ON_APP_START(0) app启动后
ON_APP_RESUME(1)    app从后台切换过来时
ON_APP_MANUAL(2)    不能自动检测，只有在调用 codePush.sync()时触发
deploymentKey (String) - 部署key，可以在js里动态修改
installMode (codePush.InstallMode) - 安装时机方法  描述
IMMEDIATE(0)    立即安装并重启app
ON_NEXT_RESTART(1)  下次启动app时安装
ON_NEXT_RESUME(2)   app从后台切换过来时安装
mandatoryInstallMode (codePush.InstallMode) - 同codePush.InstallMode.IMMEDIATE
minimumBackgroundDuration (Number) - app在后台切换过来安装的最小秒数，配合installMode.ON_NEXT_RESUME使用
updateDialog (UpdateDialogOptions) - 对话框属性  描述
appendReleaseDescription(Boolean)   是否发送通知消息显示给用户，默认为false
descriptionPrefix(String)   描述的前缀，默认为“Description:”
mandatoryContinueButtonLabel(String)    强制更新下的继续按钮的文本，默认为“Continue”
mandatoryUpdateMessage(String)  强制更新的通知消息文本，默认为“An update is available that must be installed.”
optionalIgnoreButtonLabel(String)   忽略按钮的文本，默认为“Ignore”
optionalUpdateMessage(String)   通知消息文本，默认为“An update is available. Would you like to install it?”
title(String)   对话框的标题，默认为“Update available”
optionalUpdateMessage   通知消息文本
codePushStatusDidChange
用于监听检测、下载、安装的状态——SyncStatus方法  描述
CHECKING_FOR_UPDATE (0) 查询更新
AWAITING_USER_ACTION (1)    有更新并且有对话框显示给最终用户(这只是适用updateDialog时使用)
DOWNLOADING_PACKAGE (2) 正在下载
INSTALLING_UPDATE (3)   正在安装
UP_TO_DATE (4)  更新完成
UPDATE_IGNORED (5)  提示更新后，用户选择了忽视(这只是适用updateDialog时使用)
UPDATE_INSTALLED (6)    已经安装,并将运行syncStatusChangedCallback函数返回后立即或下次启动更新，在InstallMode SyncOptions中指定。
SYNC_IN_PROGRESS (7)    有一个正在进行的同步操作运行,防止当前的调用被执行。
UNKNOWN_ERROR (-1)  同步操作遇到了一个未知错误。codePushDownloadDidProgress
下载进度返回参数    描述
totalBytes (number) 预计大小
receivedBytes(number)   已下载大小

这篇关于ReactNative 热更新，集成CodePush的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1026170。

相关文章

springboot简单集成Security配置的教程

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》：本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig（自定义资源权限规则
阅读更多...
MySQL新增字段后Java实体未更新的潜在问题与解决方案

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更（如新增字段）后,开发人员可... 目录引言1. 问题背景：数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作
阅读更多...
springboot集成Deepseek4j的项目实践

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶
阅读更多...
Spring Boot 集成 Quartz 使用Cron 表达式实现定时任务

Spring Boot 集成 Quartz 使用Cron 表达式实现定时任务

《SpringBoot集成Quartz使用Cron表达式实现定时任务》本文介绍了如何在SpringBoot项目中集成Quartz并使用Cron表达式进行任务调度,通过添加Quartz依赖、创... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启
阅读更多...
一文详解SQL Server如何跟踪自动统计信息更新

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中，我们都清楚统计信息对于优化器来说非常重要。一般情况下，我们会开启"自动更新
阅读更多...
Spring AI集成DeepSeek三步搞定Java智能应用的详细过程

Spring AI集成DeepSeek三步搞定Java智能应用的详细过程

《SpringAI集成DeepSeek三步搞定Java智能应用的详细过程》本文介绍了如何使用SpringAI集成DeepSeek,一个国内顶尖的多模态大模型,SpringAI提供了一套统一的接口,简... 目录DeepSeek 介绍Spring AI 是什么？Spring AI 的主要功能包括1、环境准备2
阅读更多...
Spring AI集成DeepSeek实现流式输出的操作方法

Spring AI集成DeepSeek实现流式输出的操作方法

《SpringAI集成DeepSeek实现流式输出的操作方法》本文介绍了如何在SpringBoot中使用Sse（Server-SentEvents）技术实现流式输出,后端使用SpringMVC中的S... 目录一、后端代码二、前端代码三、运行项目小天有话说题外话参考资料前面一篇文章我们实现了《Spring
阅读更多...
SpringBoot集成图片验证码框架easy-captcha的详细过程

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea
阅读更多...
C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo
阅读更多...
JAVA集成本地部署的DeepSeek的图文教程

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2