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学习资料给大家，谢谢大家支持！

原文地址：https://www.cnblogs.com/guangqiang/p/9589404.html

时间： 2024-09-30 19:40:45

CodePush自定义更新弹框及下载进度条的相关文章

Flex 4.6 下载进度条 IPreLoaderDisplay生命周期

Flex4.6 程序的主类实际上为SystemManager的子类.SystemManager会创建Preloader对象,然后调用PreLoader对象的initialize方法,该方法有如下签名  public function initialize(showDisplay:Boolean,                                 displayClassName:Class,                                backgroundColo

实现自己自定义的弹框和遮罩层

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果,下面我给大家讲一下有javascript实现最简单的属于自己的弹框和弹框遮罩层效果,首先编写遮罩层的javascript,代码如下: 1.遮罩层js: //获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = documen

HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务,网页加载等:如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1.html结构: <div id="loadBar01" class="loadBar"> <div> <span class="percent&qu

android异步任务图片下载(进度条提示进度)

一.AsyncTask介绍 Android提供了几种在其他线程中访问UI线程的方法. Activity.runOnUiThread( Runnable ) View.post( Runnable ) View.postDelayed( Runnable, long ) Hanlder 这些类或方法同样会使你的代码很复杂很难理解.然而当你需要实现一些很复杂的操作并需要频繁地更新UI时这会变得更糟糕. 为了解决这个问题,Android 1.5提供了一个工具类:AsyncTask,它使创建需要与用户界

关情纸尾-----Quartz2D绘制下载进度条,饼图

绘制下载进度条 1.搭建界面. 2.拖动滑竿的时候让他里面的能够跟着我的拖动,数字在改变. 数字改变时有一个注意点, 就是要显示%,它是一个特殊的符号,要用两个%%代表一个% 3.拖动滑竿的时候就是在上面画弧. 从最上面,按顺时针画,所以,它的起始角度是-90度.结束角度也是-90度 也是从起始角度开始画, 起始角度-90度, 看你下载进度是多少 假如说你下载进度是100,就是1 * 360度 也就是说这个进度占你360度多少分之一 CGContextRef ctx = UIGraphicsGe

我的Android进阶之旅------&gt;Android自定义View实现带数字的进度条（NumberProgressBar）

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢daimajia的开源奉献! 第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 版权声明:本文为[欧阳鹏]原创文章,欢迎转载,转载请注明出处! [http://blog.csdn.net/ouyang_peng/article/deta

用 CALayer 定制下载进度条控件

// // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016年 rinpe. All rights reserved. // #import <UIKit/UIKit.h> @interface RPProgressView : UIView @property (nonatomic, assign) CGFloat progressValue; // 进

仿苹果AppStore 下载进度条

以前项目自己写的 ,一个模仿苹果AppStore 下载进度条的winfrom用户控件,GDI绘制.效果如图 1 using System.Drawing; 2 using System.Windows.Forms; 3 using System.ComponentModel; 4 namespace test 5 { 6 public class CircleProgressBar : Control 7 { 8 float _progress = 0F; 9 float _Wpen = 1;

Python HTTP下载文件并显示下载进度条

下面的Python脚本中利用request下载文件并写入到文件系统,利用progressbar模块显示下载进度条. 其中利用request模块下载文件可以直接下载,不需要使用open方法,例如: import urllib import requests.packages.urllib3 requests.packages.urllib3.disable_warnings() url = "https://raw.githubusercontent.com/racaljk/hosts/maste