React Native之倒计时组件的实现(ios android)

React Native之倒计时组件的实现(ios android)

一,需求分析

     1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束。

     2,实现订单倒计时,并在倒计时结束时,订单关闭交易。

     3,实现获取验证码倒计时。

二,技术实现

      2.1,活动倒计时与订单倒计时的实现,源码如下：

componentDidMount() {
        this.interval = setInterval(() => {
            const date = this.getDateData(this.props.date);
            if (date) {
                this.setState(date);
            } else {
                this.stop();
                this.props.onEnd();
            }
        }, 1000);
    }
    componentWillMount() {
        const date = this.getDateData(this.props.date);
        if (date) {
            this.setState(date);
        }
    }

     1,倒计时方法的实现：

 getDateData(endDate) {
        endDate = endDate.replace(/-/g, "/");
        let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date)) / 1000;
        if (!!this.props.isOrederTime) {
            diff = (Date.parse(new Date(endDate)) + (Number(this.props.isOrederTime) * 60 * 1000) - Date.parse(new Date)) / 1000;
        }

        if (diff <= 0) {
            return false;
        }
        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;
    }

     2,退出界面,清除定时器

 componentWillUnmount() {
        this.stop();
    }

 stop() {
        clearInterval(this.interval);
    }

    3,数字不足时前面补0

 // 数字前面补0
    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_;
    }

 2.2,验证码倒计时与输入框

    1,倒计时的实现(I18n 语言国际化)，Api.sendVerifyCode调用后台发送验证码接口

 //倒计时
    daoJClick() {
        //判断是否点击获取验证码
        if(this.props.isClick){
            this.props.isClick()
        }
      
        if (this.props.mobile === '') {
            Toast.show(I18n.t('Signin.Please_enter_phone_number'));
            return;
        }
        if (!(/^1[345678]d{9}$/.test(this.props.mobile))) {
            Toast.show(I18n.t('Signin.pla_rightphoneNumber'));
            return
        }
        if(this.state.isDisable){
            return
        }
        Api.sendVerifyCode(this.props.mobile)
            .then((data) => {
                Toast.show(I18n.t('Signin.Verification_code_transmission_success'))
               
            }).catch((e) => {
        });
        this.setState({
            isDisable: false,
        });
        const codeTime = this.state.timerCount -1;
        const now = Date.now();
        const overTimeStamp = now + codeTime * 1000 + 100;
        /*过期时间戳（毫秒） +100 毫秒容错*/
        this.interval = setInterval(() => {
            /* 切换到后台不受影响*/
            const nowStamp = Date.now();
            if (nowStamp >= overTimeStamp) {
                /* 倒计时结束*/
                this.interval && clearInterval(this.interval);
                this.setState({
                    timerCount: codeTime,
                    timerTitle: I18n.t('Signin.Get_verifying_code'),
                    isDisable: false,
                });
            } else {
                const leftTime = parseInt((overTimeStamp - nowStamp) / 1000, 10);
                this.setState({
                    timerCount: leftTime,
                    timerTitle: `(${leftTime})s`,
                    isDisable: true,
                });
            }
            /* 切换到后台 timer 停止计时 */
        }, 1000)
    }

    2,界面功能实现

 <InputView
                {...this.props}
                returnKeyLabel={this.props.returnKeyLabel}
                returnKeyType={this.props.returnKeyType}
                align={this.props.align}
                value={this.props.pin}
                name={this.props.name}
                hintText={this.props.hintText}
                funcDisabled={this.state.isDisable}
                onChangeText={this.props.onChangeText}
                funcName={this.state.timerTitle}
                funcOnPress={() => this.daoJClick()}/>
        );

三,应用实例

    3.1 活动与订单倒计时应用

import CountDown from "../CountDown"; 
<CountDown
                                date={endtime}
                                days={{ plural: '天 ', singular: '天 ' }}
                                onEnd={() => {
                                    this.setState({
                                        isEnd: true
                                    })
                                }}
                                textColor={AppSetting.BLACK}
                                isHaveword={true}//是否有汉字
                                backgroundColor={'red'}
isOrederTime={AppSetting.OREDER_END_TIME}//是否是订单
                                textSize={AdaptationModel.setSpText(Platform.OS === 'ios' ? 18 : 20)}
                            />

   界面效果

       

3.2 验证码倒计时

import VeriCodeInput from "/VeriCodeInput";

 <VeriCodeInput
                                style={styles.input}
                                inputStyle={{ color: 'white' }}
                                align={'center'}
                                value={this.state.captcha}
                                mobile={this.state.mobile}
                                backgroundColor={'transparent'}
                                funcNameStyle={{ color: AppSetting.GREEN }}
                                hintText={I18n.t('Signin.Please_enter_verification_code')}
                                isClick={() => { this.isinputverification() }}
                                onChangeText={(text) => this.setState({ captcha: text })} />

界面效果