React-Native中使用驗證碼倒計時的按鈕實例代碼

2019-10-23 18:31:16

字體：大中小

來源：轉載

供稿：網友

開發過程中有獲取手機驗證碼的場景，這時候有這樣的要求：

1，點擊“獲取驗證碼”的按鈕，發起獲取驗證碼的網絡請求，同時按鈕置為不可用

2，如果網絡請求成功，按鈕繼續不可用，但按鈕上文本改為倒計時((*s)后重新獲取)

3，如果網絡請求失敗，按鈕置為可用

4，倒計時結束，按鈕可用

reactnative,倒計時,react,native,驗證碼

直接上代碼

源碼

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