React-Native中使用验证码倒计时的按钮实例代码
更新时间:2017年04月17日 09:21:02 作者:尹_路人
这篇文章主要介绍了React-Native中使用验证码倒计时的按钮实例代码,具有一定的参考价值,有兴趣的可以了解一下
开发过程中有获取手机验证码的场景,这时候有这样的要求:
1,点击“获取验证码”的按钮,发起获取验证码的网络请求,同时按钮置为不可用
2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取)
3,如果网络请求失败,按钮置为可用
4,倒计时结束,按钮可用
直接上代码
源码
import React,{PropTypes} from 'react'; import {View,Text,TouchableOpacity} from 'react-native'; export default class TimerButton extends React.Component { constructor(props) { super(props) this.state = { timerCount: this.props.timerCount || 90, timerTitle: this.props.timerTitle || '获取验证码', counting: false, selfEnable: true, }; this._shouldStartCountting = this._shouldStartCountting.bind(this) this._countDownAction = this._countDownAction.bind(this) } static propTypes = { style: PropTypes.object, textStyle: Text.propTypes.style, onClick: PropTypes.func, disableColor: PropTypes.string, timerTitle: PropTypes.string, enable: React.PropTypes.oneOfType([React.PropTypes.bool,React.PropTypes.number]) }; _countDownAction(){ const codeTime = this.state.timerCount; this.interval = setInterval(() =>{ const timer = this.state.timerCount - 1 if(timer===0){ this.interval&&clearInterval(this.interval); this.setState({ timerCount: codeTime, timerTitle: this.props.timerTitle || '获取验证码', counting: false, selfEnable: true }) }else{ console.log("---- timer ",timer); this.setState({ timerCount:timer, timerTitle: `重新获取(${timer}s)`, }) } },1000) } _shouldStartCountting(shouldStart){ if (this.state.counting) {return} if (shouldStart) { this._countDownAction() this.setState({counting: true,selfEnable:false}) }else{ this.setState({selfEnable:true}) } } componentWillUnmount(){ clearInterval(this.interval) } render(){ const {onClick,style,textStyle,enable,disableColor} = this.props const {counting,timerTitle,selfEnable} = this.state return ( <TouchableOpacity activeOpacity={counting ? 1 : 0.8} onPress={()=>{ if (!counting && enable && selfEnable) { this.setState({selfEnable:false}) this.props.onClick(this._shouldStartCountting) }; }}> <View style={[{width:100, height:44,flex:1,justifyContent:'center',alignItems:'center'},style]}> <Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? textStyle.color : disableColor || 'gray')}]}>{timerTitle}</Text> </View> </TouchableOpacity> ) } }
使用
<TimerButton enable={phoneNumber.length} style={{width: 110,marginRight: 10}} textStyle={{color: StaticColor.COLOR_MAIN}} timerCount={10} onClick={(shouldStartCountting)=>{ this._requestSMSCode(shouldStartCountting) }}/>
onClick
:触发后按钮selfEnable
会立即被置为false
- 通过
onClick
中的一系列逻辑处理之后需要调用回调函数结束倒计时 shouldStartCountting
:回调函数,接受一个Bool
类型的参数shouldStartCountting(true)
,开始倒计时,倒计时结束时自动恢复初始状态shouldStartCountting(false)
, 按钮的selfEnable
会立即被置为true
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
完美解决客户端webview持有的页面缓存,不会立即释放的问题
下面小编就为大家带来一篇完美解决客户端webview持有的页面缓存,不会立即释放的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-12-12Android Handler主线程和一般线程通信的应用分析
本篇文章小编为大家介绍,Android Handler主线程和一般线程通信的应用分析。需要的朋友参考下2013-04-04Android之RecyclerView轻松实现下拉刷新和加载更多示例
本篇文章主要介绍了Android之RecyclerView轻松实现下拉刷新和加载更多示例,非常具有实用价值,需要的朋友可以参考下。2017-02-02Android开发之使用ViewPager实现图片左右滑动切换效果
这篇文章主要介绍了Android开发之使用ViewPager实现图片左右滑动切换效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-08-08Android开发笔记之:ListView刷新顺序的问题详解
本篇文章是对Android中ListView刷新顺序的问题进行了详细的分析介绍,需要的朋友参考下2013-05-05
最新评论