国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CodePush自定義更新彈框及下載進(jìn)度條

church / 1463人閱讀

CodePush 熱更新之自定義更新彈框及下載進(jìn)度 先來幾張彈框效果圖

非強(qiáng)制更新場景

強(qiáng)制更新場景

更新包下載進(jìn)度效果

核心代碼 
這里的熱更新Modal框，是封裝成一個功能獨立的組件來使用的，需不需要更新以及是否為強(qiáng)制更新等邏輯均在組件內(nèi)實現(xiàn)

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("更新出錯，請重啟應(yīng)用！")
          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 (
         alert("Modal has been closed.")}>
          
            
              {
                !this.state.immediateUpdate ?
                    
                      
                      
                        
                          更新內(nèi)容
                          {this.state.updateInfo.description}
                        
                        
                          wifi情況下更新不到30秒
                        
                        {
                          !this.state.isMandatory ?
                              
                                 this.setState({modalVisible: false})}>
                                  
                                    
                                    殘忍拒絕
                                  
                                
                                 this._immediateUpdate()}
                                >
                                  
                                    極速下載
                                  
                                
                               :
                              
                                 this._immediateUpdate()}
                                >
                                  
                                    立即更新
                                  
                                
                              
                        }
                      
                     :
                    
                      
                      
                        
                        
                          版本正在努力更新中，請等待
                        
                      
                    
              }
            
          
        
    )
  }

  render(){
    return(
        
          {this.renderModal()}
        
    )
  }
}

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)

下載進(jìn)度條組件Progress 這里也是封裝成一個組件，核心代碼如下：

/**
 * 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,
    // 當(dāng)前進(jìn)度
    progress: PropTypes.number,
    // second progress進(jìn)度
    buffer: PropTypes.number,
    // 進(jìn)度條顏色
    progressColor: PropTypes.string,
    // buffer進(jìn)度條顏色
    bufferColor: PropTypes.string,
    // 進(jìn)度動畫時長
    progressAniDuration: PropTypes.number,
    // buffer動畫時長
    bufferAniDuration: PropTypes.number
  }

  static defaultProps = {
    // 進(jìn)度條顏色
    progressColor: "white",
    // buffer進(jìn)度條顏色
    bufferColor: "rgba(255,0,0,0.7)",
    // 進(jìn)度條動畫時長
    progressAniDuration: 100,
    // buffer進(jìn)度條動畫時長
    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 (
        
          
          
        
    )
  }

  _onLayout({nativeEvent: {layout:{width, height}}}) {
    // 防止多次調(diào)用,當(dāng)?shù)谝淮潍@取后,后面就不再去獲取了
    if (width > 0 && this.totalWidth !== width) {
      // 獲取progress控件引用
      let progress = this._getProgress()
      // 獲取buffer控件引用
      let buffer = this._getBuffer()
      // 獲取父布局寬度
      this.totalWidth = width
      //給progress控件設(shè)置高度
      progress.setNativeProps({
        style: {
          height: height
        }
      })

      // 給buffer控件設(shè)置高度
      buffer.setNativeProps({
        style: {
          height: height
        }
      })

      // 開始執(zhí)行進(jìn)度條動畫
      this._startAniProgress(this.progress)
      // 開始執(zhí)行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 的生命周期函數(shù)中，我們調(diào)用codepush提供的這兩個函數(shù)：并在syncImmediate 函數(shù)中，我們調(diào)用codepush的checkForUpdate 函數(shù)來檢查是否已有新版本，以及新版本的信息等，具體代碼實現(xiàn)如下：

注意：

codepush有兩個代理函數(shù)我們需要調(diào)用：

codePushStatusDidChange: codepush狀態(tài)的變化的鉤子函數(shù)

codePushDownloadDidProgress: codepush下載更新包的進(jìn)度鉤子函數(shù)

當(dāng)我們處理完上面的內(nèi)容，codepush的基本功能我們就處理完畢了，剩下的工作就是處理一些邏輯了，包括該不該彈更新框，以及更新彈框和更新進(jìn)度的處理

總結(jié)： 
本篇教程主要是講解codepush中如何處理安裝包的下載進(jìn)度，以及如何自定義更新彈框和下載進(jìn)度條，上面的彈框功能和下載進(jìn)度條功能基本都已處理完畢，可以直接復(fù)制兩個組件代碼到自己項目中，稍作修改即可使用。如果還有小伙伴對codepush詳細(xì)的接入流程不熟悉的，請點擊查看作者的CodePush熱更新詳細(xì)接入教程一文，如果還有其他的問題，也可以簡書留言或者進(jìn)群提問
RN實戰(zhàn)總結(jié)

作者React Native開源項目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star

作者簡書主頁：包含60多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.jianshu.com/u/023338566ca5 歡迎小伙伴們：多多關(guān)注，多多點贊

作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)

友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝大家支持！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97401.html

相關(guān)文章

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<