如何實(shí)現(xiàn)React Native驗(yàn)證碼倒計(jì)時(shí)工具類

小編給大家分享一下如何實(shí)現(xiàn)React Native驗(yàn)證碼倒計(jì)時(shí)工具類，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

示例

/**
 * Created by zhuang.haipeng on 2017.9.11
 *
 * 廣告倒計(jì)時(shí),驗(yàn)證碼倒計(jì)時(shí)工具類
 *
 * 用法: //60 * 1000 為60秒 , 60 * 60 * 100 為60分鐘 ...
 * let countdownDate = new Date(new Date().getTime() + 60 * 1000)
 *  CountdownUtil.settimer(countdownDate, (time) => {
 *   Console.log(time) --> {years: 0, days: 0, hours: 0, min: 0, sec: 49, millisec: 0}
 *  }
 *
 *  切記: 在應(yīng)用工具類的頁面退出的時(shí)候, 調(diào)用CountdownUtil.stop() 清除定時(shí)器,以免內(nèi)存爆了
 */

export default class CountdownUtil {

  /** 定時(shí)器 */
  interval = null;

  /**
   * 創(chuàng)建定時(shí)器
   *
   */
  static settimer(countdownDate, callbak) {
    this.interval = setInterval(() => {
      let time = this.getDateData(countdownDate)
      callbak && callbak(time)
    }, 1000)
  }


  /**
   * 侄計(jì)時(shí)計(jì)算 --> 通過此方法計(jì)算,可以解決應(yīng)用退出后臺(tái)的時(shí)候,定時(shí)器不走
   * @param countdownDate
   * @return {*}
   */
  static getDateData(countdownDate) {
    let diff = (Date.parse(new Date(countdownDate)) - Date.parse(new Date)) / 1000;

    if (diff <= 0) {
     this.stop() // 倒計(jì)時(shí)為0的時(shí)候, 將計(jì)時(shí)器清除
      return 0;
    }

    const timeLeft = {
      years: 0,
      days: 0,
      hours: 0,
      min: 0,
      sec: 0,
      millisec: 0,
    };

    if (diff >= (365.25 * 86400)) {
      timeLeft.years = Math.floor(diff / (365.25 * 86400));
      diff -= timeLeft.years * 365.25 * 86400;
    }
    if (diff >= 86400) {
      timeLeft.days = Math.floor(diff / 86400);
      diff -= timeLeft.days * 86400;
    }
    if (diff >= 3600) {
      timeLeft.hours = Math.floor(diff / 3600);
      diff -= timeLeft.hours * 3600;
    }
    if (diff >= 60) {
      timeLeft.min = Math.floor(diff / 60);
      diff -= timeLeft.min * 60;
    }
    timeLeft.sec = diff;
    return timeLeft;
  }

  /**
   * 數(shù)字補(bǔ)零 --> 例: 00時(shí)01分59秒
   * @param num
   * @param length
   * @return {*}
   */
  static leadingZeros(num, length = null) {

    let length_ = length;
    let num_ = num;
    if (length_ === null) {
      length_ = 2;
    }
    num_ = String(num_);
    while (num_.length < length_) {
      num_ = '0' + num_;
    }
    return num_;
  }

  /** 清除定時(shí)器 */
  static stop() {
    clearInterval(this.interval);
  }
};

利用callback將轉(zhuǎn)換的時(shí)間倒計(jì)時(shí)傳遞出去， 您可以打印一下callbak回去的time對(duì)象

這里簡單以驗(yàn)證碼倒計(jì)時(shí)為例：

思路：

1. 先設(shè)置狀態(tài)機(jī)isSentVerify默認(rèn)true可以發(fā)送驗(yàn)證碼
2. 點(diǎn)擊之后就重新設(shè)置狀態(tài)機(jī)isSentVerify為false, 不讓用戶再次點(diǎn)擊發(fā)送網(wǎng)絡(luò)請(qǐng)求
3. 聲明倒計(jì)時(shí)的時(shí)間（這里只能在你點(diǎn)擊的時(shí)候才能聲明，如果再componentDidMount中，會(huì)一進(jìn)入就開始計(jì)時(shí)的）
4. 請(qǐng)求成功后設(shè)置倒計(jì)時(shí)，判斷如果time.sec > 0 的時(shí)候，則設(shè)置時(shí)間，否則將文字設(shè)置為為“重新獲取”
5. 然后判斷文字為“重新獲取”， 然后將狀態(tài)機(jī)isSentVerify設(shè)為true， 這樣用戶倒計(jì)時(shí)結(jié)束后，可以再次發(fā)送驗(yàn)證碼。
6. 網(wǎng)絡(luò)請(qǐng)求失敗的時(shí)候，在catch處將isSentVerify設(shè)置為true，這樣用戶可以再次獲取驗(yàn)證碼

 if (this.state.isSentVerify === true) {
      // 倒計(jì)時(shí)時(shí)間
      let countdownDate = new Date(new Date().getTime() + 60 * 1000)
      // 點(diǎn)擊之后驗(yàn)證碼不能發(fā)送網(wǎng)絡(luò)請(qǐng)求
      this.setState({
        isSentVerify: false
      });

      Api.userRegisterCheckCode(this.state.phoneText)
        .then(
          (data) => { // 倒計(jì)時(shí)時(shí)間
            CountdownUtil.settimer(countdownDate, (time) => {
              this.setState({
                timerTitle: time.sec > 0 ? time.sec + 's' : '重新獲取'
              }, () => {
                if (this.state.timerTitle == "重新獲取") {
                  this.setState({
                    isSentVerify: true
                  })
                }
              })
            })
          }
        ).catch((err) => {
        this.setState({
          isSentVerify: true,
        })
      });
    }

退出頁面的時(shí)候，記得銷毀定時(shí)器

 componentWillUnmount() {
    CountdownUtil.stop()
  }

效果圖：

以上是“如何實(shí)現(xiàn)React Native驗(yàn)證碼倒計(jì)時(shí)工具類”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！