相关参考链接:
http://www.jianshu.com/p/67de8aa052af
http://www.jianshu.com/p/6e96c6038d80
http://www.jianshu.com/p/28589c0be542
可视化code-push:https://appcenter.ms/
1、安装code-push服务、创建code-push账号(可以参考链接http://www.jianshu.com/p/fa362da953c7)
这里记录下相关命令行:
(1)npm install -g code-push-cli 安装codepush
(2)code-push -v 查看版本
(3) code-push register 注册codepush账号
(4) code-push login 登陆
(5) code-push logout 注销
(6) code-push access-key ls 列出登陆的token
(7) code-push access-key rm 删除某个 access-key
以下是操作code-push的基础命令行:
code-push app add 在账号里面添加一个新的app
code-push app remove或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app ls或者list 列出账号下面的所有app
注意:只要在终端输入上面命令行即可查看具体命令的输入,例如
相关例子:
code-push app add TestDemo android react-native 添加一个只限于android的RN应用,应用名为TestDemo
code-push deployment ls TestDemo -k 查询应用名的相关信息
2、配置(android)
1、安装code-push最新版本
npm install --save react-native-code-push@latest
2、关联code-push
如果你安装了rnpm直接用命令:rnpm link react-native-code-push,如果没有安装先安装npm i -g rnpm,然后再输入rnpm link react-native-code-push,进行关联
3、在MainApplication.java添加CodePush
其中new CodePush里面的第一个字符串就是上面通过 code-push deployment ls 应用名 -k 查询出来的deployment key
//注册ReactPackage
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RNToastPackage(),
new CodePush("V2S1zhYo5RlNnEICKZxfW8HWXXa6913c6b5b-51e8-4377-a846-654362cd06f1", MainApplication.this, BuildConfig.DEBUG)
);
}
在build.gradle中
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
buildConfigField "String", "CODEPUSH_KEY", '"你的deployment-Production key"'
}
releaseStaging {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
buildConfigField "String", "CODEPUSH_KEY", '"你的deployment-Staging key"'
}
}
然后就可以在AndroidStudio打出相应的apk包进行测试
4、RN端的代码如下:
import React, {PureComponent, Component} from 'react';
import {
AppRegistry,
Text,
View,
Image,
Button,
StyleSheet,
FlatList,
TouchableOpacity,
Dimensions,
ActivityIndicator
} from 'react-native';
import CodePush from "react-native-code-push"
const {height, width} = Dimensions.get('window');
const codePushOptions = {
checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
updateDialog: true,
installMode: CodePush.InstallMode.IMMEDIATE
};
export default class Root extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
componentDidMount() {
}
/** Update is downloaded silently, and applied on restart (recommended) */
sync = () => {
CodePush.sync();
}
/** Update pops a confirmation dialog, and then immediately reboots the app */
syncImmediate = () => {
CodePush.sync(
{
installMode: CodePush.InstallMode.IMMEDIATE,//启动模式三种:ON_NEXT_RESUME、ON_NEXT_RESTART、IMMEDIATE
updateDialog: {
appendReleaseDescription:true,//是否显示更新description,默认为false
descriptionPrefix:'更新内容:\n',//更新说明的前缀。 默认是” Description: 更新内容:
mandatoryContinueButtonLabel:"立即更新",//强制更新的按钮文字,默认为continue
mandatoryUpdateMessage:"",//- 强制更新时,更新通知. Defaults to “An update is available that must be installed.”.
optionalIgnoreButtonLabel: '稍后',//非强制更新时,取消按钮文字,默认是ignore
optionalInstallButtonLabel: '后台更新',//非强制更新时,确认文字. Defaults to “Install”
optionalUpdateMessage: '有新版本了,是否更新?',//非强制更新时,更新通知. Defaults to “An update is available. Would you like to install it?”.有新版本了,是否更新?
title: '更新提示'//要显示的更新通知的标题. Defaults to “Update available”.
}
}
);
}
render() {
// {this.sync}
return (
Hello,热更新啦2017-11-03-18-18
检查更新
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
image: {
margin: 30,
width: 30,
height: 30,
},
});
Root = CodePush(codePushOptions)(Root);
5、发布热更新
1、 release-react命令发布更新,例子如下:
code-push release-react CodePushDemo android --deploymentName Staging --description 添加text字样修改 --dev false --bundleName index.android.bundle
其中CodePushDemo 是你创建的应用名
2、 查询应用名的相关信息
code-push deployment ls TestDemo -k
3、查看发布的历史记录
code-push deployment history TestDemo Staging
4、如果在Staging测试没问题了,可以迁移到Production
code-push promote <应用名> Staging Production -r 100%
最后的100%是指覆盖用户,可以先设成20%等其他值
附录一下打包bundle包的命令:
Android:
react-native bundle --entry-file index.android.js --platform android --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res --dev false
Ios:
react-native bundle --entry-file index.ios.js --platform ios --bundle-output ./ios/main.jsbundle --assets-dest ./ios/assets --dev false