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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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的无限分类实现想法~
2007/01/02 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[20:30]职业巡回赛回顾
2018/08/09 DOTA
详解Python中的文件操作
2016/08/28 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
数字漫画:comiXology
2020/06/13 全球购物
精伦电子Java笔试题
2013/01/16 面试题
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
自我鉴定书面格式
2014/01/13 职场文书
初二生物教学反思
2014/02/03 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python