react-native 倒计时

简单的倒计时功能

  componentDidMount() {
    //声明一个定时器
    this.timer = setInterval(
      () => {
        this._timeShow();
      },
      1000,
    );

  }

_timeShow = () => {
    const {history} = this.props;
     // this.state.timeTotal 是需要倒计时的总数，单位是 秒
    let timeDown = this.state.timeTotal;
    //初始化分钟和秒，因为没有涉及到小时，所以没有做
    let minute = 0;
    // 初始化秒
    let second = 0;
    //总数-1
    timeDown = timeDown - 1;
    //如果总数到0，则关闭定时器
    if (timeDown == 0) {
      this.setState({
        timeSecond: 0
      });
      //关闭定时器
      clearTimeout(this.timer);
    } else {
      //如果总数大于60，需要进行计算
      if (timeDown > 60) {
          //计算分钟 
        minute = Math.floor(timeDown / 60);
        //  Math.floor 返回的是一个整数
        second = timeDown - minute * 60;
        //如果秒为0，则代表整除了，那么分钟要减1，秒数设置为59
        if (second == 0) {
          second = 59
          minute = minute - 1;
        }
      } else {
        //如果总数小于60，直接给秒赋值，不需要进行计算 .
        second = timeDown;
      }
      //修改state，渲染页面
      this.setState({
        timeTotal: timeDown,
        timeMinute: minute,
        timeSecond: second
      });
    }
  }

如果数字小于10，进行补0.

  <div style={styles.moduleItemText}>剩余支付时间:
      00:{timeMinute > 9 ? timeMinute : "0" + timeMinute}: {timeSecond > 9 ? timeSecond : "0" + timeSecond}</div>
                </div>