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监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 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
PHP自动更新新闻DIY
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
js中url对象化管理分析
2017/12/29 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python调用API实现智能回复机器人
2018/04/10 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
《狼》教学反思
2014/03/02 职场文书
Python 阶乘详解
2021/10/05 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android