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/- 打离线包并安装：
建议看此链接
实现热更新
修改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相关推荐
- react-native热更新之code-push
文章部分内容参考:https://blog.csdn.net/qq_33323251/article/details/79437932 但是我在这个基础上进行了补充 code-push已经迁移到 AP ...
- walle多渠道打包+Tinker(bugly)热更新集成+360加固(乐固)
这三个东东是干啥的相信大家都有所耳闻了,如果你没有听说过,请出门左拐,百度一下你就知道.这里不对这三个东东具体的集成方式做详细的介绍,因为官方文档已经写的很详细了,主要是对同时使用这三个东东时所需要注 ...
- iOS项目集成react-native热更新（pushy:react-native-update）
项目集成react-native参考官网文档 cd 项目文件夹 npm install -g react-native-update-cli (一台电脑只运行一次就行) npm install --s ...
- 高仿京东商城app、集成react-native热更新功能
简介 这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
- 高仿京东商城App，集成react-native 热更新功能
前言 这是一个高仿京东商城的android 混合项目,具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,使用最新MVI架构开发 kotlin . retrofit2 + o ...
- reactnative热更新 react-native-pushy
在开讲前先介绍另外一种方法也可以进行代码的热更新,利用codepush大家可以参考这篇文章: 博客地址 快速入门-准备工作 首先你应该有一个基于React Native开发的应用,我们把具有packa ...
- react-native热更新插件react-native-code-push
使用react-native-code-push插件来实现热更新的时候,会遇到一些问题.下面这个问题就让我差点崩溃了. 在测试 Production 和 Staging 是否会去检查各自环境下的bun ...
- React Native 实现热更新方案CodePush过程中遇到的问题 ( 搭建自己的CodePush服务器 )
前言 CodePush官方: https://github.com/Microsoft/react-native-code-push 自搭建CodePushServer: https://github ...
- React-Native热更新
安装环境: React-native 0.63.3 React-native-code-push 0.6.3 全局安装 App Center CLI 第一步全局安装appcenter的脚手架,通过np ...
最新文章
- shell单例-处理方案
- 每日一皮：中关村地铁站和普通地铁站的区别
- zTree树形菜单使用实例
- Redis运维和开发学习笔记(1) Redis简介
- 论文浅尝 | 利用指针生成网络的知识图谱自然语言生成
- 一文掌握Redisson分布式锁原理|干货推荐
- ie8 html 语音标签,让IE8支持html5中的video标签
- Vscode ROS 环境搭建
- Android 自动轮播图+滑动效果
- 简单的五子棋游戏(C语言)
- Nesterov Momentum牛顿动量法
- copyonwritearraylist 深究
- 如果你不释放MogaFX外汇，你将无法获得交易或投资
- C语言趣味问题系列【2】自守数
- 导出word单元格间隔空白问题
- c语言：数据保存的方法实现简易贪吃蛇
- unity接入声网音频sdk
- maven无法找到idk中的类
- 初学者快速了解spring的IOC和AOP原理
- 计算机网络专业土味情话,火爆全网的20句土味情话，你被哪一句撩到了？