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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)