南强小屋 Design By 杰米
由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧。本文介绍了ReactNative短信验证码倒计时控件,分享给大家
功能
根据项目的需要,需要写一个自定义的控件,实现如下功能:
- 默认文字为点击获取验证码
- 点击后出现60秒的倒计时
- 颜色,字号可调
- 倒计时过程中,再次点击需要忽略掉
- 倒计时完成后文本恢复成点击获取验证码
- 再几次点击同之前
其实说了这么多,就是个最普通的验证码的功能。。。
效果
效果图如下:(录的图片比较一般,对付着看吧)
实现原理
自己封装了个控件,它内部含有一个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 "===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 "htmlcode">
<MyCountTime timeLeft={5}>
</MyCountTime>
当然这只是,最简单的应用的代码,我们还提供了很多的自定义的属性,大家可以根据自己项目的需要,去调节这些参数。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无ReactNative短信验证码倒计时控件的实现代码的评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
