本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
