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 })} />

界面效果