집 > 기사 > 웹 프론트엔드 > React Native 인증코드 카운트다운 공유

React Native 인증코드 카운트다운 공유

小云云원래의: 2018-01-03 13:09:062329검색

이 글은 주로 React Native 검증 코드 카운트다운 도구 클래스를 공유하며, 관심 있는 친구들이 참고할 수 있기를 바랍니다.

이 글의 예시는 참고용으로 React Native 검증 코드 카운트다운 도구 클래스의 구체적인 코드를 공유합니다. 구체적인 내용은 다음과 같습니다.

과거에는 타이머를 직접 사용하고 현재 시간을 계산하지 않았기 때문입니다. 프로그램을 종료하면 타이머가 실행되지 않습니다. 이 도구는 프로그램이 백그라운드에서 종료되고 타이머가 실행되지 않는 문제를 간단히 해결합니다. 그러면 코드를 직접 입력하세요~~

/**
 * Created by zhuang.haipeng on 2017.9.11
 *
 * 广告倒计时,验证码倒计时工具类
 *
 * 用法: //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}
 *  }
 *
 *  切记: 在应用工具类的页面退出的时候, 调用CountdownUtil.stop() 清除定时器,以免内存爆了
 */

export default class CountdownUtil {

  /** 定时器 */
  interval = null;

  /**
   * 创建定时器
   *
   */
  static settimer(countdownDate, callbak) {
    this.interval = setInterval(() => {
      let time = this.getDateData(countdownDate)
      callbak && callbak(time)
    }, 1000)
  }


  /**
   * 侄计时计算 --> 通过此方法计算,可以解决应用退出后台的时候,定时器不走
   * @param countdownDate
   * @return {*}
   */
  static getDateData(countdownDate) {
    let diff = (Date.parse(new Date(countdownDate)) - Date.parse(new Date)) / 1000;

    if (diff <= 0) {
     this.stop() // 倒计时为0的时候, 将计时器清除
      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;
  }

  /**
   * 数字补零 --> 例: 00时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_ = &#39;0&#39; + num_;
    }
    return num_;
  }

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

콜백을 사용하여 통과하세요. 변환 시간 카운트다운을 인쇄할 수 있습니다. callbak

다음은 간단한 확인 코드 카운트다운입니다.

아이디어:

1 먼저 상태 시스템을 기본값으로 설정하세요. 확인 코드를 보내려면 true
2. isSent를 클릭한 후 상태 머신을 재설정합니다.Verify는 false이므로 사용자가 네트워크 요청을 보내기 위해 다시 클릭하는 것을 방지합니다.
3. 카운트다운 시간을 선언합니다.
4. 요청이 성공한 후 카운트다운을 설정하고 time.sec > 0인지 확인한 다음 시간을 설정하고, 그렇지 않으면 텍스트를 "reacquire"로 설정합니다.
5. 그런 다음 "재획득"할 텍스트를 결정한 다음 상태 시스템 isSentVerify를 true로 설정하여 사용자 카운트다운이 끝난 후 인증 코드를 다시 보낼 수 있습니다.
6. 네트워크 요청이 실패하면 사용자가 인증 코드를 다시 받을 수 있도록 isSentVerify를 true로 설정하세요.

 if (this.state.isSentVerify === true) {
      // 倒计时时间
      let countdownDate = new Date(new Date().getTime() + 60 * 1000)
      // 点击之后验证码不能发送网络请求
      this.setState({
        isSentVerify: false
      });

      Api.userRegisterCheckCode(this.state.phoneText)
        .then(
          (data) => { // 倒计时时间
            CountdownUtil.settimer(countdownDate, (time) => {
              this.setState({
                timerTitle: time.sec > 0 ? time.sec + &#39;s&#39; : &#39;重新获取&#39;
              }, () => {
                if (this.state.timerTitle == "重新获取") {
                  this.setState({
                    isSentVerify: true
                  })
                }
              })
            })
          }
        ).catch((err) => {
        this.setState({
          isSentVerify: true,
        })
      });
    }

페이지를 종료할 때 타이머를 삭제하세요

 componentWillUnmount() {
    CountdownUtil.stop()
  }

렌더링 :

React Native 인증코드 카운트다운 공유

관련 기사