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 相关文章推荐
AngularJS基础知识
Dec 21 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
json数据格式常见操作示例
Jun 13 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
图书管理程序(三)
2006/10/09 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
微信支付扫码支付php版
2016/07/22 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
vue.js的提示组件
2017/03/02 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue select选择框数据变化监听方法
2018/08/24 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python 图片验证码代码
2008/12/07 Python
快速了解Python相对导入
2018/01/12 Python
python中kmeans聚类实现代码
2018/02/23 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
详解python-图像处理(映射变换)
2019/03/22 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
出国留学自荐信
2013/10/25 职场文书
八年级数学教学反思
2014/01/31 职场文书
竞选学委演讲稿
2014/09/13 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers