ReactNative短信验证码倒计时控件的实现代码


Posted in Javascript onJuly 20, 2017

由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧。本文介绍了ReactNative短信验证码倒计时控件,分享给大家

功能

根据项目的需要,需要写一个自定义的控件,实现如下功能:

  1. 默认文字为点击获取验证码
  2. 点击后出现60秒的倒计时
  3. 颜色,字号可调
  4. 倒计时过程中,再次点击需要忽略掉
  5. 倒计时完成后文本恢复成点击获取验证码
  6. 再几次点击同之前

其实说了这么多,就是个最普通的验证码的功能。。。

效果

效果图如下:(录的图片比较一般,对付着看吧)

ReactNative短信验证码倒计时控件的实现代码

实现原理

自己封装了个控件,它内部含有一个Text控件,然后我们又写了一个timer,然后负责倒计时,然后每次都需要判断一下是否继续,然后加了一个flag字段,判断是否接受下次点击事件,当倒计时结束之后还需要将初始状态重置回去即可。

代码

控件代码

import React, {Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableHighlight,
  StatusBar,
  Alert,
  AppRegistry
} from 'react-native';
import LinkRow from '../components/LinkRow';
import cStyles from '../styles/CommonStyle';

import axios from 'axios';

class MyCountTime extends Component {
  constructor(props) {
    super(props);
    let timeLeft = this.props.timeLeft > 0 ? this.props.timeLeft : 5;
    let width = this.props.width || 100;
    let height = this.props.height || 50;
    let color = this.props.color || '#42A5F5';
    let fontSize = this.props.fontSize || 30;
    let fontWeight = this.props.fontWeight || '600';
    let borderColor = this.props.borderColor || '#42A5F5';
    let borderWidth = this.props.borderWidth || 1;
    let borderRadius = this.props.borderRadius || 4;
    let backgroundColor = this.props.backgroundColor || '#42A5F5';
    let begin = 0;
    let press = this.props.press;

    this.afterEnd = this.props.afterEnd || this._afterEnd;
    this.style = this.props.style;

    this.state = {
      timeLeft: timeLeft,
      begin: begin
    };
    this.countTextStyle = {
      textAlign: 'center',
      color: '#42A5F5',
      fontSize: fontSize,
      fontWeight: fontWeight

    };
    this.countViewStyle = {
      backgroundColor: backgroundColor,
      alignItems: 'center',
      borderColor: borderColor,
      borderWidth: borderWidth,
      borderRadius: borderRadius,
      width: width,
      height: height
    }
  }

  countdownfn(timeLeft, callback, begin) {
    if (timeLeft > 0) {
      this.state.begin = 1;
      console.log("===lin===>");

      let that = this;
      let interval = setInterval(function () {
        if (that.state.timeLeft < 1) {
          clearInterval(interval);
          callback(that)
        } else {
          let totalTime = that.state.timeLeft;
          that.setState({
            timeLeft: totalTime - 1
          })
        }
      }, 1000)
    }
  }

  _beginCountDown() {
    if (this.state.begin === 1){
      return;
    }
    let time = this.state.timeLeft;
    console.log("===lin===> time " + time);
    let afterEnd = this.afterEnd;
    let begin = this.state.begin;
    console.log("===lin===> start " + begin);
    this.countdownfn(time, afterEnd, begin)
  }

  _afterEnd(that) {
    console.log('------------time over');
    that.setState({
      begin : 0,
      timeLeft : 5,
    })
  }

  componentDidMount() {

  }

  render() {
    return (
      <View style={{position:'absolute',top:13,right:43,height:30}}>
        <Text
          onPress={this._beginCountDown.bind(this)}
          style={{color: '#42A5F5', fontSize: 17,height:40 , zIndex:999}}> { this.state.begin === 0 ? '点击获取验证码' : this.state.timeLeft} </Text>

      </View>
    )
  }
}

应用代码

<MyCountTime timeLeft={5}>

</MyCountTime>

当然这只是,最简单的应用的代码,我们还提供了很多的自定义的属性,大家可以根据自己项目的需要,去调节这些参数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
详解Angular CLI + Electron 开发环境搭建
Jul 20 #Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 #Javascript
js 事件的传播机制(实例讲解)
Jul 20 #Javascript
详谈for循环里面的break和continue语句
Jul 20 #Javascript
js is_valid_filename验证文件名的函数
Jul 19 #Javascript
vue Render中slots的使用的实例代码
Jul 19 #Javascript
You might like
地震发生中逃生十大法则
2008/05/12 Javascript
jQuery each()小议
2010/03/18 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python交换变量
2008/09/06 Python
python解析xml文件实例分享
2013/12/04 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
理解Python中函数的参数
2015/04/27 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书