简单介绍下如何使用codepush进行热更新，文章尾部附demo地址
1、首先需要继承React-Native环境，看这篇文章默认已经集成好了，->如何集成
2、注册CodePush账号
注册CodePush账号,简单点直接在网上注册，注册地址
3、登录授权
code-push login
检查是否登录成功，可以重复上面的登录命令
4、在CodePush上注册APP
为了让CodePush服务器有我们的App，我们需要CodePush注册App，输入下面命令即可完成注册，这里需要注意如果我们的应用分为iOS和Android两个平台，这时我们需要分别注册两套key
应用添加成功后就会返回对应的production 和 Staging 两个key，production代表生产版的热更新部署，Staging代表开发版的热更新部署，在ios中将staging的部署key复制在info.plist的CodePushDeploymentKey值中，在android中复制在Application的getPackages的CodePush中
添加iOS平台应用
code-push app add codepushDemo ios react-native
我们可以输入如下命令来查看我们刚刚添加的App
code-push app list
CodePush管理App的相关命令：
- code-push app add 在账号里面添加一个新的app
- code-push app remove 或者 rm 在账号里移除一个app
- code-push app rename 重命名一个存在app
- code-push app list 或则 ls 列出账号下面的所有app
- code-push app transfer 把app的所有权转移到另外一个账号
5、RN代码集成CodePush
首先我们需要安装CodeoPush组件，然后通过link命令添加原生依赖，最后在RN根组件中添加热更新逻辑代码
安装CodePush组件
npm install react-native-code-push --save
添加原生依赖，这里添加依赖我们使用自动添加依赖的方式
react-native link react-native-code-push
RN代码
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Alert
} from 'react-native';
import CodePush from "react-native-code-push"; // 引入code-push
let codePushOptions = {
//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
};
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
class App extends Component {
//如果有更新的提示
syncImmediate() {
CodePush.sync( {
//安装模式
//ON_NEXT_RESUME 下次恢复到前台时
//ON_NEXT_RESTART 下一次重启时
//IMMEDIATE 马上更新
installMode : CodePush.InstallMode.IMMEDIATE ,
//对话框
updateDialog : {
//是否显示更新描述
appendReleaseDescription : true ,
//更新描述的前缀。 默认为"Description"
descriptionPrefix : "更新内容：" ,
//强制更新按钮文字，默认为continue
mandatoryContinueButtonLabel : "立即更新" ,
//强制更新时的信息. 默认为"An update is available that must be installed."
mandatoryUpdateMessage : "必须更新后才能使用" ,
//非强制更新时，按钮文字,默认为"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非强制更新时，确认按钮文字. 默认为"Install"
optionalInstallButtonLabel : '后台更新' ,
//非强制更新时，检查到更新的消息文本
optionalUpdateMessage : '有新版本了，是否更新？' ,
//Alert窗口的标题
title : '更新提示'
} ,
} ,
);
}
componentWillMount() {
CodePush.disallowRestart();//禁止重启
this.syncImmediate(); //开始检查更新
}
componentDidMount() {
CodePush.allowRestart();//在加载完了，允许重启
}
render() {
return (
Welcome to React Native!
To get started, edit App.js
{instructions}
这是第0个版本
);
}
}
// 这一行必须要写
App = CodePush(codePushOptions)(App)
export default App
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,
},
})
6、原生应用配置CodePush
选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将之前的值：
$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
改为：
$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
-
选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面创建的key，我们直接复制进去即可
image.png -
打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位
image.png
iOS平台CodePush环境集成完毕
7、发布版本更新
在使用之前需要考虑的是检查更新时机，更新是否强制，更新是否要求即时等
更新时机
一般常见的应用内更新时机分为两种，一种是打开App就检查更新，一种是放在设置界面让用户主动检查更新并安装
- 打开APP就检查更新
最为简单的使用方式在React Natvie的根组件的componentDidMount方法中通过
codePush.sync()（需要先导入codePush包：import codePush from 'react-native-code-push'）方法检查并安装更新，如果有更新包可供下载则会在重启后生效。不过这种下载和安装都是静默的，即用户不可见。如果需要用户可见则需要额外的配置。具体可以参考codePush官方API文档，部分代码，完整代码请参照文档上面
codePush.sync({
updateDialog: {
appendReleaseDescription: true,
descriptionPrefix:'\n\n更新内容：\n',
title:'更新',
mandatoryUpdateMessage:'',
mandatoryContinueButtonLabel:'更新',
},
mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
deploymentKey: CODE_PUSH_PRODUCTION_KEY,
});
- 用户点击检查更新按钮
在用户点击检查更新按钮后进行检查，如果有更新则弹出提示框让用户选择是否更新，如果用户点击立即更新按钮，则会进行安装包的下载（实际上这时候应该显示下载进度，这里省略了）下载完成后会立即重启并生效（也可配置稍后重启），部分代码如下
*
codePush.checkForUpdate(deploymentKey).then((update) => {
if (!update) {
Alert.alert("提示", "已是最新版本--", [
{
text: "Ok", onPress: () => {
console.log("点了OK");
}
}
]);
} else {
codePush.sync({
deploymentKey: deploymentKey,
updateDialog: {
optionalIgnoreButtonLabel: '稍后',
optionalInstallButtonLabel: '立即更新',
optionalUpdateMessage: '有新版本了，是否更新？',
title: '更新提示'
},
installMode: codePush.InstallMode.IMMEDIATE,
},
(status) => {
switch (status) {
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("DOWNLOADING_PACKAGE");
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log(" INSTALLING_UPDATE");
break;
}
},
(progress) => {
console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
}
);
}
}
更新是否强制
如果是强制更新需要在发布的时候指定，发布命令中配置--m true
更新是否要求即时
在更新配置中通过指定installMode来决定安装完成的重启时机，亦即更新生效时机
- codePush.InstallMode.IMMEDIATE ：安装完成立即重启更新
- codePush.InstallMode.ON_NEXT_RESTART ：安装完成后会在下次重启后进行更新
- codePush.InstallMode.ON_NEXT_RESUME ：安装完成后会在应用进入后台后重启更新
如何发布CodePush更新包
在将RN的bundle放到CodePush服务器之前，我们需要先生成bundle，在将bundle上传到CodePush
生成bundle
- 生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
上传bundle
- 将生成的bundle文件上传到CodePush，我们直接执行下面的命令即可
code-push release-react codepushDemo ios --t 1.0.0 --dev false --d Staging --des "这是第一个更新包" --m true
查看发布的历史记录，命令如下
查询Production
code-push deployment history codepushDemo Production
查询Staging
code-push deployment history codepushDemo Staging
对1.0.0版本的应用如何发布第二个、第n个更新包
操作和上面一样
注意事项
发布更新包命令中的 -- t 对应的参数是和我们项目中的版本号一致的，这个不要误理解为是更新包的版本号，例如项目中的版本号为1.0.0， 这时如果我们需要对这个1.0.0 版本的项目进行第一次热更新，那么命令中的 -- t 也为1.0.0，第二次热更新任然为1.0.0
项目的版本号需要改为三位的，默认是两位的，但是CodePush需要三位数的版本号
发布更新应用时，应用的名称必须要和之前注册过的应用名称一致
创建应用时，信息要填写正确
当执行link，命令卡住不执行时，这时直接按回车键先ignore key即可
参考链接
iOS的CodePush Demo地址