由于最近刚开始认真的搞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>
当然这只是，最简单的应用的代码，我们还提供了很多的自定义的属性，大家可以根据自己项目的需要，去调节这些参数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“ReactNative短信验证码倒计时控件的实现代码”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。