2. 程式人生 > >CodePush自定義更新彈框及下載進度條

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

阿新 • • 發佈：2018-09-05
switch center ans san dial val 鉤子 hang 開始

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

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

相關推薦

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

switch center ans san dial val 鉤子 hang 開始 CodePush 熱更新之自定義更新彈框及下載進度 先來幾張彈框效果圖 非強制更新場景 image 強制更新場景 image 更新包下載進度效果 im

自定義 popWindow彈框 工具包

popu second db2 oca pri dial motion void float 　　前言：因為Android 沒有像IOS一樣的ActionSheet，雖然在github上看到有一些類似ActionSheet的庫，總覺得不好用，不如自己寫一個彈框通用類，樣式全

自定義alert彈框

system div share ons title nbsp tof 接口 har 1 /**************** UIAlertControllerStyleAlert *************************/ 2 /*創建一個 可以自定義文字

自定義Dialog彈框和其背景陰影顯示

昨天研究了一下自定義Dialog的彈框，其實要點都是把自定義好的view用setContentView(view)的方法設定進dialog裡，首先我們先看一個簡單的自定義Dialog。 一、寫佈局檔案：custom_dialog_layout.xml(這個佈局就是一個簡單的提示內容，下面有一

leaflet自定義popup彈框，給popup彈框顯示內容新增按鈕button或者超連結等html標籤

首先效果圖： 這裡在彈框的文字下面添加了一個button按鈕和超連結。這種效果在web應用中很常見。所以下面總結一下如何用leaflet實現。               首先要用leaflet實現彈框的效果（如下

微信小程式自定義授權彈框

前言 最近微信獲取使用者資訊的介面有調整，就是這貨：wx.getUserInfo(OBJECT)，文件描述如下： 此介面有調整，使用該介面將不再出現授權彈窗，請使用 <button open-type="getUserInfo"><

自定義dialog彈框效果

自定義dialog及動畫效果 通常專案中會用到比較特殊的彈框，則就需要自定義寫一個dialog，需要重新畫個佈局新增到dialog中。這裡就需要自定義一個Dialog類繼承與Dialog。也有可能需要動畫效果來增加UI效果。 直接上程式碼： package com.wuj

自定義Dialog彈窗及軟體盤的隱藏和顯示

1.佈局檔案<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

自定義控制元件Android圓環進度條

Android自定義控制元件學習之圓環進度條，學習了一段時間，自定義控制元件，對一些自定義所需要的Api，基本上也掌握了，但是對於比較複雜的自定義控制元件，他們的座標計算 一直比較噁心（可能，我數學比較差~），記錄自定義控制元件學習過程。    對於圓環進度條的自定義

【Android自定義View】美觀個性的進度條

在很多開發中，例如網路請求中，是個比較耗時的操作，這時就需要一個進度條，不僅視覺上有很好的使用者體驗，操作上也讓使用者直觀的看到後臺操作的進度。所以進度條是必須會的。 效果如圖： 這樣的進度條比傳統的官方的美觀許多 下面介紹編寫過程 1.繼承VIew 編寫一個新的自定義

自定義SurfaceView之音訊錄製圓形進度條

本篇文章介紹自定義SurfaceView來實現如下的效果 由於對於SurfaceView不是很熟練，這次拿它來練手 SurfaceView用途： 一般View可以滿足大部分的繪圖需求，但如果需要併發執行復雜耗時的邏輯的時候，就會不斷阻塞主執行緒，導

我的Android進階之旅------>Android如何通過自定義SeekBar來實現視訊播放進度條

首先來看一下效果圖，如下所示：其中進度條如下：接下來說一說我的思路，上面的進度拖動條有自定義的Thumb，在Thumb正上方有一個PopupWindow視窗，窗口裡面顯示當前的播放時間。在SeekBar右邊有一個文字框顯示當前播放時間/總時間。step1、先來看一看Popup

自定義View，又一種進度條的呈現，CircleProgressView使用解析

話不多說，先上效果圖 迴圈旋轉的狀態 專案結構 一個Sample包，一個Lib包。Lib包裡面其實只有一個累，很多內容都在素材檔案裡，比較建議把內容複製出來，貼到自己的專案中 主類: public class MainAc

自定義View之漸變色圓形進度條

先展示下效果圖： 然後按照自定義view的步驟來實現。 我們需要將目標定義清楚： 目標是漸變色圓形進度條，那麼，使用canvas畫弧形是基礎了，另外是漸變色的效果，這裡使用LinearGradient來實現。 既然是提供一個進度條，那麼，是需要自定義

android自定義控制元件－－漸變進度條

　效果圖如下：　 　實現程式碼： import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics

Android自定義SeekBar樣式，遇到的進度條高度問題

首先來看我的android:progressDrawable="@drawable/seek_progress_drawable"，下面是seek_progress_drawable檔案： <

Android中自定義SeekBar的背景顏色，進度條顏色，以及滑塊的圖片

最近正好有這方面的需要，用了很久時間，找到了改變基本顏色以及圖片的方法 下面以SeekBar為例，為大家描述一下我的做法 首先在layout資料夾中的main.xml內容如下 Xml程式碼   <?xml version="1.0" encoding="utf-8"?>   <

Android自定義View分享——一個水平的進度條

寫在前面 筆者近來在學習Android自定義View，收集了一些不算複雜但又“長得”還可以的自定義View效果實現，這些View的邏輯不算複雜，大多都只用到了Paint、Canvas類的一些常用的API。在後續的部落格裡面，將分享幾個不同的效果，本文作為第一篇

我的Android進階之旅------>Android自定義View實現帶數字的進度條（NumberProgressBar）

今天在Github上面看到一個來自於 daimajia所寫的關於Android自定義View實現帶數字的進度條（NumberProgressBar）的精彩案例，在這裡分享給大家一起來學習學習！同時感謝daimajia的開源奉獻！ 第一步、效果展

Qt編寫自定義控制元件13-多型進度條

前言 多型進度條，顧名思義，有多重狀態，其實本控制元件主要是用來表示百分比進度的，由於之前已經存在了百分比進度條控制元件，名字被霸