React-Native中使用验证码倒计时的按钮

开发过程中有获取手机验证码的场景,这时候有这样的要求:
1,点击“获取验证码”的按钮,发起获取验证码的网络请求,同时按钮置为不可用
2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取)
3,如果网络请求失败,按钮置为可用
4,倒计时结束,按钮可用

直接上代码

源码

"use strict";

import React,{PropTypes} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    ViewPropTypes
} from 'react-native';
export default class CountDownButton extends React.Component {
    constructor(props) {
      super(props)
        this.state = {
            timerCount: this.props.timerCount || 60,
            timerTitle: this.props.timerTitle || '获取验证码',
            counting: false,
            selfEnable: true,
        };
        this._shouldStartCountting = this._shouldStartCountting.bind(this)
        this._countDownAction = this._countDownAction.bind(this)
    }
    static propTypes = {
      style: ViewPropTypes.style,
      textStyle: Text.propTypes.style,
      onClick: PropTypes.func,
      disableColor: PropTypes.string,
      timerTitle: PropTypes.string,
      enable: PropTypes.oneOfType([PropTypes.bool,PropTypes.number]),
      timerEnd: PropTypes.func
    };

    _countDownAction(){
        const codeTime = this.state.timerCount;
        const now = Date.now()
        const overTimeStamp = now + codeTime * 1000 + 100/*过期时间戳(毫秒) +100 毫秒容错*/
        this.interval = setInterval(() =>{
            /* 切换到后台不受影响*/
            const nowStamp = Date.now()
            if (nowStamp >= overTimeStamp) {
                /* 倒计时结束*/
                this.interval&&clearInterval(this.interval);
                this.setState({
                    timerCount: codeTime,
                    timerTitle: this.props.timerTitle || '获取验证码',
                    counting: false,
                    selfEnable: true
                })
                if (this.props.timerEnd) {
                    this.props.timerEnd()
                };
            }else{
                const leftTime = parseInt((overTimeStamp - nowStamp)/1000, 10)
                this.setState({
                    timerCount: leftTime,
                    timerTitle: `重新获取(${leftTime}s)`,
                })
            }
            /* 切换到后台 timer 停止计时 */
            /*
            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{
                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:120, height:44,justifyContent:'center',alignItems:'center'},style]}>
                    <Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? (textStyle ? textStyle.color : 'blue') : disableColor || 'gray')}]}>{timerTitle}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}   

使用

gitHub
点击下载源文件

import CountDownButton from './countDownButton.js'
  ...

< CountDownButton enable={phoneNumber.length}
    style={{width: 110,marginRight: 10}}
    textStyle={{color: 'blue'}}
    timerCount={10}
    timerTitle={'点击获取验证码'}
    timerActiveTitle={['请在(','s)后重试']}
    onClick={(shouldStartCountting)=>{
      // shouldStartCountting是一个回调函数,根据调用接口的情况在适当的时候调用它来决定是否开始倒计时
      //随机模拟发送验证码成功或失败
      const requestSucc = Math.random() + 0.5 > 1; 
      shouldStartCounting(requestSucc)
    }}/>
  • shouldStartCountting:回调函数,接受一个Bool类型的参数
    • shouldStartCountting(true),开始倒计,但按钮仍不可点击,直到倒计时结束
    • shouldStartCountting(false), 按钮恢复可点击状态,但不会开始倒计时
propstypedefault valuemark
onClickfunc-点击后触发,同时将按钮置为不可用,配合shouldStartCountting 使用
timerCountnumber60倒计时时长
shouldStartCounttingfunc-决定是否开始倒计时的回调函数,参数类型Bool
styleView style--
textStyleText style--
disableColorstringgray按钮不可用状态下的颜色
enableboolfalse按钮是否可用(比如用户输入合法手机号时可用,否则不可用)
timerEndfunc-倒计时结束的回调函数
timerActiveTitlearray['重新获取(', 's)']倒计时的数字会插在数组第一项之后,如:['请在', '秒后重新获取'],显示为【请在60秒后重新获取】

---

更新: 切换到后台验证码倒计时跑秒不受影响

---

17/07/25 更新:
1、更换贴图
2、发布到npm
支持通过 npm 命令安装和使用

  npm i react-native-smscode-count-down --save

更新
添加属性timerActiveTitle(Array)



作者:尹_路人
链接:https://www.jianshu.com/p/51736baead49
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
展开阅读全文

没有更多推荐了,返回首页