집 > 기사 > 웹 프론트엔드 > React Native는 인증코드 카운트다운 기능을 구현합니다.

React Native는 인증코드 카운트다운 기능을 구현합니다.

php中世界最好的语言원래의: 2018-04-17 10:22:212550검색

이번에는 인증코드 카운트다운 기능을 구현하기 위해 React Native를 가져왔습니다. 인증코드 카운트다운 기능을 구현하기 위한 React Native의 주의사항은 무엇인가요? 다음은 실제 사례입니다.

과거에는 timer를 직접 사용하여 현재 시간을 계산하지 않았기 때문에 프로그램을 종료할 때마다 타이머가 실행되지 않았습니다. 이 도구 클래스는 프로그램 종료 시 타이머가 실행되지 않는 버그를 간단하게 해결합니다. 그럼, 코드만 올려주세요~~

/**
 * 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. 먼저 isSentVerify 상태를 기본적으로 true로 설정하여 인증 코드를 보냅니다
2. 클릭한 후 사용자가 다시 클릭하여 네트워크 요청을 보내는 것을 방지하려면 isSentVerify 상태를 false로 재설정하세요.
3. 을 클릭해야만 사용할 수 있습니다. componentDidMount에 있을 때만 선언할 수 있으며 입력과 동시에 시간이 시작됩니다.)
4 요청 성공 후 카운트다운을 설정하고 time.sec인지 확인합니다. > 0이면 시간을 설정하고 그렇지 않으면 텍스트를 "Reacquire"로 설정합니다.
5. 그런 다음 텍스트가 "Reacquire"인지 확인한 다음 isSentVerify 상태를 true로 설정하면 사용자가 이후에 다시 인증 코드를 보낼 수 있습니다. 카운트다운이 끝났습니다.
6. 네트워크 요청이 실패하면 사용자가 인증 코드를 다시 받을 수 있도록 catch에서 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 + 's' : '重新获取'
              }, () => {
                if (this.state.timerTitle == "重新获取") {
                  this.setState({
                    isSentVerify: true
                  })
                }
              })
            })
          }
        ).catch((err) => {
        this.setState({
          isSentVerify: true,
        })
      });
    }

페이지를 종료할 때 타이머를 삭제하는 것을 잊지 마세요.

 componentWillUnmount() {
    CountdownUtil.stop()
  }

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.