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

来源:https://www.cnblogs.com/guangqiang/archive/2018/09/05/9589404.html
-Advertisement-
Play Games

CodePush 熱更新之自定義更新彈框及下載進度 先來幾張彈框效果圖 非強制更新場景 image 強制更新場景 image 更新包下載進度效果 image 非強制更新場景 image image 強制更新場景 image image 更新包下載進度效果 image image 核心代碼 這裡的熱更 ...


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

先來幾張彈框效果圖

  • 非強制更新場景


    image
    image

  • 強制更新場景


    image
    image

  • 更新包下載進度效果


    image
    image

核心代碼

這裡的熱更新Modal框，是封裝成一個功能獨立的組件來使用的，需不需要更新以及是否為強制更新等邏輯均在組件內實現

image
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
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
image

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

image
image

註意：

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

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於Html5 Plus + Vue + Mui 移動App 開發（二）
    基於Html5 Plus + Vue + Mui 移動App 開發（二） 界面效果： 本頁面採用Html5 Plus + Vue + Mui 開發移動界面，本頁面實現： 1、下拉刷新、上拉獲取更多功能； 2、使用Vue 進行數據綁定； 3、使用WebView 創建打開新的界面； 源碼如下： App下 ...
  • ios安裝ipa與安卓安裝apk
    ideviceinstaller -i .ipa包所在的路徑 環境搭建：Mac上安裝brew（brew裡面有很多命令，可以安裝自己想用的命令） 安裝命令如下：curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xv ...
  • 基於html5 plus + Mui 移動App開發（一）
    使用Html5 plus + Mui 進行移動App開發，有一段時間了，這幾日得空，做個資訊App分享給大家。 今天主要分享主頁實現，首先看下效果： 此界面主要分為：標題、內容分類列表、搜索及設置按鈕。 標題 內容分類列表 搜索框 設置按鈕 界面定義完後，接下來進行事件定義，實現交互效果： 完整代碼 ...
  • iOS-內購的那些事（漏單的問題）
    前言 說起內購，其實挺令開發者厭煩的，原因呢，先不說漏單的問題，首先蘋果要扣除30%的銷售額哦，可恨不？（我覺得可恨），有些想辦法先隱藏掉第三方支付（支付寶、微信等），等項目上線了，再跳過內購使用第三方支付，emmmm.......這個方法確實不錯，但是如果被蘋果發現了，APP內虛擬產品調用第三方支 ...
  • Android 網路框架 OKHttp
    概述 OKhttp是一個網路請求開源項目，Android網路請求輕量級框架,支持文件上傳與下載，支持https，由移動支付Square公司貢獻。 依賴 Get請求 Get方式發送同步請求 Get方式發送非同步請求 Post請求 FormBody傳遞鍵值對參數 RequestBody傳遞Json或Fil ...
  • OC數組的簡單使用、NSArray
    和上一篇文章一樣，數組的重要性不言而喻，在OC編程的過程中我們會不斷的使用到NSArray，和C語言不同的是，我們這裡的數組只能存OC對象類型，不能存C語言基本數據類型，也不能存NSNull類型，但是我們這裡的數組可以存多種對象類型，比如，在同一個數組裡面，既可以存字元串類型，又可以存對象化了以後的 ...
  • iOS----------Xcode 無線調試
    環境要求： 至少Mac OSX 10.12.6 iOS 11 Xcode 9 1. ”自己的工程“ -> windows -> Device and Simulators ，打開設備和模擬器界面 https://www.jianshu.com/p/e9c1525cc540 https://www.j ...
  • 前端之jQuery
    jQuery內容： 下載鏈接：jQuery官網 中文文檔：jQuery AP中文文檔 詳情請戳鏈接：前端之jQuery（一） 前端之jQuery（二） ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類