关键词：
CodePush 热更新之自定义更新弹框及下载进度
先来几张弹框效果图
-
非强制更新场景
image -
强制更新场景
image -
更新包下载进度效果
image
核心代码
这里的热更新Modal框，是封装成一个功能独立的组件来使用的，需不需要更新以及是否为强制更新等逻辑均在组件内实现
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 (
<Modal
animationType="none"
transparent=true
visible=this.state.modalVisible
onRequestClose=() => alert("Modal has been closed.")>
<View style=styles.modal>
<View style=styles.modalContainer>
!this.state.immediateUpdate ?
<View>
<Image style=width: deviceInfo.deviceWidth - 60 source=require(‘../../../assets/images/me/updateBg.png‘) resizeMode=‘stretch‘/>
<View style=backgroundColor: GlobalStyles.white>
<View style=marginHorizontal: 15>
<Text style=marginVertical: 20, fontSize: 17, color: GlobalStyles.textBlockColor, fontWeight: ‘bold‘>更新内容</Text>
<Text style=lineHeight: 20>this.state.updateInfo.description</Text>
</View>
<View style=alignItems: GlobalStyles.center, marginTop: 20>
<Text style=fontSize: 14, color: GlobalStyles.textGrayColor>wifi情况下更新不到30秒</Text>
</View>
!this.state.isMandatory ?
<View style=flexDirection: GlobalStyles.row, height: 50, alignItems: GlobalStyles.center, marginTop: 20, borderTopColor: GlobalStyles.lineColor, borderTopWidth: 1 >
<TouchableOpacity
onPress=() => this.setState(modalVisible: false)>
<View style=flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60) / 2, height: 50, borderRightColor: GlobalStyles.lineColor, borderRightWidth: 1, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center>
<Icon name=‘oneIcon|reject_o‘ size=20 color=‘#B6B6B6‘/>
<Text style=fontSize: 17, fontWeight: ‘bold‘, color: GlobalStyles.textGrayColor, marginLeft: 10>残忍拒绝</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style=flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60) / 2, height: 50, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center
onPress=() => this._immediateUpdate()
>
<View style=backgroundColor: ‘#3496FA‘, flex: 1, height: 40, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center, margin: 10, borderRadius: 20>
<Text style=fontSize: 17, color: GlobalStyles.white, fontWeight: ‘bold‘>极速下载</Text>
</View>
</TouchableOpacity>
</View> :
<View style=flexDirection: GlobalStyles.row, height: 60, alignItems: GlobalStyles.center, marginTop: 20, borderTopColor: GlobalStyles.lineColor, borderTopWidth: 1, width: deviceInfo.deviceWidth - 60>
<TouchableOpacity
style=flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60), height: 50, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center
onPress=() => this._immediateUpdate()
>
<View style=backgroundColor: ‘#3496FA‘, flex: 1, height: 40, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center, borderRadius: 20, marginHorizontal: 40>
<Text style=fontSize: 17, color: GlobalStyles.white, fontWeight: ‘bold‘>立即更新</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View> :
<View>
<Image style=width: deviceInfo.deviceWidth - 60 source=require(‘../../../assets/images/me/updateBg.png‘) resizeMode=‘stretch‘/>
<View style=backgroundColor: GlobalStyles.white, paddingVertical: 20, backgroundColor: GlobalStyles.white, alignItems: GlobalStyles.center>
<Progress
ref="progressBar"
progressColor=‘#89C0FF‘
style=
marginTop: 20,
height: 10,
width: deviceInfo.deviceWidth - 100,
backgroundColor: GlobalStyles.bgColor,
borderRadius: 10,
/>
<View style=alignItems: GlobalStyles.center, marginVertical: 20>
<Text style=fontSize: 14, color: GlobalStyles.textGrayColor>版本正在努力更新中，请等待</Text>
</View>
</View>
</View>
</View>
</View>
</Modal>
)
render()
return(
<View style=styles.container>
this.renderModal()
</View>
)
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 这里也是封装成一个组件，核心代码如下：
/**
* Created by guangqiang on 2018/3/29.
*/
import React, Componentfrom ‘react‘
import View, StyleSheet, Animated, Easingfrom ‘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 (
<View
style=[styles.container,this.props.style]
onLayout=this._onLayout.bind(this)>
<Animated.View
ref="progress"
style=
position:‘absolute‘,
width: this._progressAni,
backgroundColor:this.props.progressColor,
borderRadius: 10
/>
<Animated.View
ref="buffer"
style=
position:‘absolute‘,
width: this._bufferAni,
backgroundColor:this.props.bufferColor,
borderRadius: 10,
/>
</View>
)
_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组件中的热更新核心代码讲解
这我们在UpdateComp 组件中，在 componentWillMount 的生命周期函数中，我们调用codepush提供的这两个函数：并在syncImmediate 函数中，我们调用codepush的checkForUpdate 函数来检查是否已有新版本，以及新版本的信息等，具体代码实现如下：
注意：
codepush有两个代理函数我们需要调用：
-
codePushStatusDidChange: codepush状态的变化的钩子函数
-
codePushDownloadDidProgress: codepush下载更新包的进度钩子函数
当我们处理完上面的内容，codepush的基本功能我们就处理完毕了，剩下的工作就是处理一些逻辑了，包括该不该弹更新框，以及更新弹框和更新进度的处理
总结：
本篇教程主要是讲解codepush中如何处理安装包的下载进度，以及如何自定义更新弹框和下载进度条，上面的弹框功能和下载进度条功能基本都已处理完毕，可以直接复制两个组件代码到自己项目中，稍作修改即可使用。如果还有小伙伴对codepush详细的接入流程不熟悉的，请点击查看作者的CodePush热更新详细接入教程一文，如果还有其他的问题，也可以简书留言或者进群提问
RN实战总结
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
- 作者简书主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5欢迎小伙伴们：多多关注，多多点赞
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！
带有进度条下载更新的自定义 UITableViewCell
】带有进度条下载更新的自定义UITableViewCell【英文标题】：CustomUITableViewCellwithProgressBardownloadupdate【发布时间】：2014-01-1509:28:56【问题描述】：我正在尝试使用进度条加载更新每个表格单元格，但我被卡住了。我为具有以下属性... 查看详情
下载时更新ListView中的进度条
...一个显示数据库记录列表的活动。在这个活动中有一个自定义的ListView。在自定义ListView中，有一个Button和一个TextView和一个ProgressBar。我调用AsyncTask的按钮侦听器位于Custom 查看详情
关于文件上传下载以及其他进度条的实现
...，或者某个批量的进度的进度条实现思路都是这样： 定义一自定义类，列出总数量，完成数（有需求决定可分成功与失败） 然后访问链接的时候进行处理，将session中存入自定义类，自定义类中存入初始化信息。并执行... 查看详情
自定义控件——圆形圆点进度条（仿安全卫士中的一键加速）
...觉得有点意思，可以研究一下，再说也有一段时间没写自定义控件了，正好复习复习（说实话，一段时间没写，思路有，但就是不知道从哪开始）。昨天花了一天的时间才把它搞定，先看效果图：3种显示模式：模拟进度动画效... 查看详情
scss自定义进度条(代码片段)
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情
sap自定义进度条(代码片段)
1*&---------------------------------------------------------------------*2*&ReportZCHENH0283*&4*&---------------------------------------------------------------------*5*&6*&7*& 查看详情
android自定义圆弧进度条（半圆进度条）圆弧渐变色进度条带指示圆弧宽高可自由修改(代码片段)
首先我们来看下效果图圆弧高度可以自定义，说明，只有高度设置为宽度的二分之一时，才是半圆，否则就是半圆的一部分，即圆弧。不只是圆弧是自定的，图中的文字“2”的控件也是自定义的，下面... 查看详情
ycprogress自定义百分比进度条(代码片段)
...用start开始倒计时，也可以调用stop暂停倒计时，也可以自定义设置进度仿杀毒类型百分比进度条支持设置多种类型，比如设 查看详情
自定义圆环形进度条实现(代码片段)
...一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可以自定义；可以自定义圆环的宽度；可以设置底部文字（文字内容、大小和textSt 查看详情
xml自定义进度条圆和水平(代码片段)
如何自定义矩形进度条？
】如何自定义矩形进度条？【英文标题】：Howtocustomrectangleprogressbar?【发布时间】：2013-04-0110:14:51【问题描述】：我想自定义一个带有UIKIT的矩形进度条，就像被吸引的图像一样。有没有源代码？Cocos2d与CCProgressTimer有相同的，但... 查看详情
以swift语言在自定义表格视图单元格中更新进度视图下载
】以swift语言在自定义表格视图单元格中更新进度视图下载【英文标题】：updateprogressviewdownloadwithincustomtableviewcellinswiftlanguage【发布时间】：2017-03-1309:19:01【问题描述】：我有一个问题，关于如何在从Internet下载文件的自定义表... 查看详情
如何在加载时加载自定义进度条
】如何在加载时加载自定义进度条【英文标题】：Howtoloadacustomprogressbaratloadingtime【发布时间】：2014-10-2908:09:53【问题描述】：我有一个要求，我需要在初始屏幕上显示进度条/活动指示器，直到我在iOS7中完成数据下载。提前致谢... 查看详情
composecanvas自定义圆形进度条(代码片段)
@ComposablefunCircleRing(boxWidthDp:Int,viewModel:TaskViewModel)Canvas(modifier=Modifier.size(boxWidthDp.dp),onDraw=valstrokWidth=30F//灰色背景drawArc(Color(0,0,0,15),startAngle=160f,s 查看详情
android怎么自定义绘制如下图中这种进度条
下面是安卓学习手册中实现各种进度条的截图：要想看各种进度条的实现代码和文档，直接去360手机助手中下载安卓学习手册，例子文档随便看。1、说明 在某些操作的进度中的可视指示器，为用户呈现操作的进度，还它有... 查看详情
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情