CodePush 热更新之自定义更新弹框及下载进度
先来几张弹框效果图
-
非强制更新场景
image -
强制更新场景
image -
更新包下载进度效果
image
核心代码
这里的热更新Modal框，是封装成一个功能独立的组件来使用的，需不需要更新以及是否为强制更新等逻辑均在组件内实现
image
UpdateComp 热更新组件核心代码如下：
/**
* Created by guangqiang on 2018/3/29.
*/
import React, {Component} from 'react'
import {View, Text, StyleSheet, Modal, TouchableOpacity, Image} from 'react-native'
import Progress from './index'
import {GlobalStyles} from '../../../constants/GlobalStyles'
import {deviceInfo} from "../../../constants/DeviceInfo"
import {Icon} from '../../../utils/iconFont'
import CodePush from "react-native-code-push"
import {Toast} from "../../../utils/toast"
const CODE_PUSH_KEY = 'jE39cjdnkzqfpXgRylPXDDNkEzJm3ac740b8-b071-474f-afbf-369c6e4642ab'
let codePushOptions = {
checkFrequency : CodePush.CheckFrequency.ON_APP_START
}
class ProgressBar extends Component {
constructor(props) {
super(props)
this.currProgress = 0.0
this.syncMessage = ''
this.state = {
modalVisible: false,
isMandatory: false,
immediateUpdate: false,
updateInfo: {}
}
}
codePushStatusDidChange(syncStatus) {
if (this.state.immediateUpdate) {
switch(syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
this.syncMessage = 'Checking for update'
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.syncMessage = 'Downloading package'
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
this.syncMessage = 'Awaiting user action'
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.syncMessage = 'Installing update'
break;
case CodePush.SyncStatus.UP_TO_DATE:
this.syncMessage = 'App up to date.'
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
this.syncMessage = 'Update cancelled by user'
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.syncMessage = 'Update installed and will be applied on restart.'
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
this.syncMessage = 'An unknown error occurred'
Toast.showError('更新出错，请重启应用！')
this.setState({modalVisible: false})
break;
}
}
}
codePushDownloadDidProgress(progress) {
if (this.state.immediateUpdate) {
this.currProgress = parseFloat(progress.receivedBytes / progress.totalBytes).toFixed(2)
if(this.currProgress >= 1) {
this.setState({modalVisible: false})
} else {
this.refs.progressBar.progress = this.currProgress
}
}
}
syncImmediate() {
CodePush.checkForUpdate(CODE_PUSH_KEY).then((update) => {
console.log('-------' + update)
if (!update) {
Toast.showLongSuccess('已是最新版本！')
} else {
this.setState({modalVisible: true, updateInfo: update, isMandatory: update.isMandatory})
}
})
}
componentWillMount() {
CodePush.disallowRestart()
this.syncImmediate()
}
componentDidMount() {
CodePush.allowRestart()
}
_immediateUpdate() {
this.setState({immediateUpdate: true})
CodePush.sync(
{deploymentKey: CODE_PUSH_KEY, updateDialog: {}, installMode: CodePush.InstallMode.IMMEDIATE},
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
)
}
renderModal() {
return (
alert("Modal has been closed.")}>
{
!this.state.immediateUpdate ?
更新内容
{this.state.updateInfo.description}
wifi情况下更新不到30秒
{
!this.state.isMandatory ?
this.setState({modalVisible: false})}>
残忍拒绝
this._immediateUpdate()}
>
极速下载
:
this._immediateUpdate()}
>
立即更新
}
:
版本正在努力更新中，请等待
}
)
}
render(){
return(
{this.renderModal()}
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: GlobalStyles.bgColor
},
modal: {
height: deviceInfo.deviceHeight,
width: deviceInfo.deviceWidth,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.3)'
},
modalContainer: {
marginHorizontal: 60,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}
})
export default CodePush(codePushOptions)(ProgressBar)
下载进度条组件Progress 这里也是封装成一个组件，核心代码如下：
image
/**
* Created by guangqiang on 2018/3/29.
*/
import React, {Component}from 'react'
import {View, StyleSheet, Animated, Easing}from 'react-native'
import PropTypes from 'prop-types'
export default class CusProgressBar extends Component {
static propTypes = {
...View.propTypes,
// 当前进度
progress: PropTypes.number,
// second progress进度
buffer: PropTypes.number,
// 进度条颜色
progressColor: PropTypes.string,
// buffer进度条颜色
bufferColor: PropTypes.string,
// 进度动画时长
progressAniDuration: PropTypes.number,
// buffer动画时长
bufferAniDuration: PropTypes.number
}
static defaultProps = {
// 进度条颜色
progressColor: 'white',
// buffer进度条颜色
bufferColor: 'rgba(255,0,0,0.7)',
// 进度条动画时长
progressAniDuration: 100,
// buffer进度条动画时长
bufferAniDuration: 100
}
constructor(props) {
super(props)
this._progressAni = new Animated.Value(0)
this._bufferAni = new Animated.Value(0)
}
componentWillReceiveProps(nextProps) {
this._progress = nextProps.progress
this._buffer = nextProps.buffer
}
componentWillMount() {
this._progress = this.props.progress
this._buffer = this.props.buffer
}
render() {
return (
)
}
_onLayout({nativeEvent: {layout:{width, height}}}) {
// 防止多次调用,当第一次获取后,后面就不再去获取了
if (width > 0 && this.totalWidth !== width) {
// 获取progress控件引用
let progress = this._getProgress()
// 获取buffer控件引用
let buffer = this._getBuffer()
// 获取父布局宽度
this.totalWidth = width
//给progress控件设置高度
progress.setNativeProps({
style: {
height: height
}
})
// 给buffer控件设置高度
buffer.setNativeProps({
style: {
height: height
}
})
// 开始执行进度条动画
this._startAniProgress(this.progress)
// 开始执行buffer动画
this._startAniBuffer(this.buffer)
}
}
_startAniProgress(progress) {
if (this._progress >= 0 && this.totalWidth !== 0) {
Animated.timing(this._progressAni, {
toValue: progress * this.totalWidth,
duration: this.props.progressAniDuration,
easing: Easing.linear
}).start()
}
}
_startAniBuffer(buffer) {
if (this._buffer >= 0 && this.totalWidth !== 0) {
Animated.timing(this._bufferAni, {
toValue: buffer * this.totalWidth,
duration: this.props.bufferAniDuration,
}).start()
}
}
_getProgress() {
if (typeof this.refs.progress.refs.node !== 'undefined') {
return this.refs.progress.refs.node
}
return this.refs.progress._component
}
_getBuffer() {
if (typeof this.refs.buffer.refs.node !== 'undefined') {
return this.refs.buffer.refs.node;
}
return this.refs.buffer._component;
}
}
Object.defineProperty(CusProgressBar.prototype, 'progress', {
set(value){
if (value >= 0 && this._progress !== value) {
this._progress = value;
this._startAniProgress(value);
}
},
get() {
return this._progress;
},
enumerable: true,
})
Object.defineProperty(CusProgressBar.prototype, 'buffer', {
set(value){
if (value >= 0 && this._buffer !== value) {
this._buffer = value;
this._startAniBuffer(value);
}
},
get() {
return this._buffer;
},
enumerable: true,
})
const styles = StyleSheet.create({
container: {
height: 4,
backgroundColor: 'blue'
}
})
对UpdateComp组件中的热更新核心代码讲解
image
这我们在UpdateComp 组件中，在 componentWillMount 的生命周期函数中，我们调用codepush提供的这两个函数：并在syncImmediate 函数中，我们调用codepush的checkForUpdate 函数来检查是否已有新版本，以及新版本的信息等，具体代码实现如下：
image
注意：
codepush有两个代理函数我们需要调用：
image
codePushStatusDidChange: codepush状态的变化的钩子函数
codePushDownloadDidProgress: codepush下载更新包的进度钩子函数
当我们处理完上面的内容，codepush的基本功能我们就处理完毕了，剩下的工作就是处理一些逻辑了，包括该不该弹更新框，以及更新弹框和更新进度的处理
总结：
本篇教程主要是讲解codepush中如何处理安装包的下载进度，以及如何自定义更新弹框和下载进度条，上面的弹框功能和下载进度条功能基本都已处理完毕，可以直接复制两个组件代码到自己项目中，稍作修改即可使用。如果还有小伙伴对codepush详细的接入流程不熟悉的，请点击查看作者的CodePush热更新详细接入教程一文，如果还有其他的问题，也可以留言或者进群提问
更多文章
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
- 作者主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们：多多关注，多多点赞