最近一个app项目使用了code-push,之前记录的匆忙,这里重写一下使用记录,内容不回很丰富,只是按本项目中已实现的功能来记录(这次我的项目只要求android端使用,这里只记录本项目的使用经历)。
官网:https://github.com/Microsoft/react-native-code-push/blob/HEAD/docs/setup-android.md
注意一个区别点:平时使用什么包大部分都是本项目中安装就可以了,code-push需要本地安装并且项目中安装。
1.首先本地安装: npm i react-native-code-push
2.注册登录code-push: code-push register(这里我之前做项目的时候已完成注册,提示已登录)
这个命令会打开一个网页,我是选择github的方式注册登录的。
3.创建一个app项目:
code-push app add <appName> <os> <platform>
code-push app add 项目名 设备 技术框架
新建成功会出现两个环境的key,production使用在正式环境,staging使用在测试环境
4.获取app的两个key
除了新建的时候会出现key,要查看key可以用以下命令:
如果已经使用的项目则会出现版本号,更新时间,下载次数等等:
5.在项目中安装:
在你的项目目录下npm i react-native-code-push
react-native link react-native-code-push
如果个人出现意外,跟着官网走就是了~
6.项目中配置key
位置:/android/app/src/main/res/values/strings.xml
<resources>
<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">qwqws1qT7KEQksqb5ad78d1-152fqweewqew-48de-a31f-ccd34f718b39qw</string>
<string name="app_name">appName</string>
</resources>
比如在安装的时候没有设置key的可以在配置中设置
/*
../android/app/src/main/java/com/...
*/
new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG)
7.打包
android 目录下 ./gradlew assembleRelease
生成的apk所在位置:/android/app/build/outputs/apk
8.写入代码:
import { AppRegistry, View, ActivityIndicator, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';
import App from './src';
import codePush from 'react-native-code-push'; //引入
const styles = StyleSheet.create({
//样式
})
class AppCont extends Component {
constructor(props) {
super(props)
this.state = {
show: false,
download: 0,
}
}
componentDidMount() {
//检查更新
codePush.sync(
{ updateDialog: false, installMode: codePush.InstallMode.IMMEDIATE },//无对话框,立即启动更新
(status) => {
switch (status) {
case codePush.SyncStatus.UPDATE_IGNORED:
//console.log('ignored')
break;
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
//console.log('download')
this.setState({show: true})
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
//console.log('installing')
this.setState({show: false})
break;
}
},
({ receivedBytes, totalBytes, }) => {
this.setState({download: parseInt(receivedBytes * 100 / totalBytes)})
}
);
}
render() {
return (
<View style={{ flex:1 }}>
<App />
{
this.state.show ?
<View style={styles.loadBox}>
<View style={styles.loadView}/>
<View style={styles.loadBackView}/>
<ActivityIndicator
size="large"
color="#3385ff"
style={styles.load}
animating={this.state.loading}
/>
<Text style={styles.loadText}>更新中:{this.state.download}%</Text>
</View>
: null
}
</View>
);
}
}
AppRegistry.registerComponent('appName', () => AppCont);
9.尝试自动更新
有人安装后,重复4步骤查看是否有下载记录。确认项目和code-push已经配置妥当。
尝试着更改一些app内容然后更新
code-push release-react laoqiu.com/mytms android
code-push release-react laoqiu.com/mytms android -d Production //注意环境
注意更新版本问题
尝试着更新后发现,你更新的版本号为1.1.1 就只能使安装的时候版本为1.1.1的出发更新,别的版本不会触发更新,会console反馈提示该软件有更新内容,但是不属于该版本。
使用补充:更新提示,中文对话框
componentDidMount() {
codePush.sync(
{
updateDialog: {
appendReleaseDescription: true,
optionalIgnoreButtonLabel: '忽略',
optionalInstallButtonLabel: '立即更新',
title: '更新程序',
optionalUpdateMessage: '检测到更新内容,是否立即更新?',
},
installMode: codePush.InstallMode.IMMEDIATE,
},//显示对话框,询问更新
(status) => {
switch (status) {
case codePush.SyncStatus.UPDATE_IGNORED:
//console.log('对话框结果为忽略更新')
break;
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
//console.log('下载开始')
this.setState({show: true})
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
//console.log('下载结束')
this.setState({show: false})
break;
}
},
({ receivedBytes, totalBytes, }) => {
this.setState({download: parseInt(receivedBytes * 100 / totalBytes)})
}
);
}