溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用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會立即被置為falseonClick中的一系列邏輯處理之后需要調用回調函數結束倒計時shouldStartCountting：回調函數，接受一個Bool類型的參數shouldStartCountting(true)，開始倒計時，倒計時結束時自動恢復初始狀態shouldStartCountting(false)， 按鈕的selfEnable會立即被置為true看完上述內容，你們掌握利用React-Native怎么實現一個驗證碼倒計時按鈕的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
