开篇先介绍另外一种热更新方式: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 app
app add MyApp windows react-native Adds app "MyApp", indicating that it's a Windows ReactNative app
app 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) 已下载大小