CodePush自定義更新彈框及下載進度條

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 ( <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 這里也是封裝成一個組件，核心代碼如下：

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 ( <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組件中的熱更新核心代碼講解

image

這我們在UpdateComp 組件中，在 componentWillMount 的生命周期函數中，我們調用codepush提供的這兩個函數：並在syncImmediate 函數中，我們調用codepush的checkForUpdate 函數來檢查是否已有新版本，以及新版本的信息等，具體代碼實現如下：

image

注意：

codepush有兩個代理函數我們需要調用：

image

• 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學習資料給大家，謝謝大家支持！