開發(fā)過程中有獲取手機驗證碼的場景字支，這時候有這樣的要求：
1，點擊“獲取驗證碼”的按鈕刃跛，發(fā)起獲取驗證碼的網絡請求桨昙，同時按鈕置為不可用
2，如果網絡請求成功桂塞，按鈕繼續(xù)不可用玛痊，但按鈕上文本改為倒計時((*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是一個回調函數(shù)驰弄，根據(jù)調用接口的情況在適當?shù)臅r候調用它來決定是否開始倒計時
      //隨機模擬發(fā)送驗證碼成功或失敗
      const requestSucc = Math.random() + 0.5 > 1; 
      shouldStartCountting(requestSucc)
    }}/>

• shouldStartCountting：回調函數(shù)溺职，接受一個Bool類型的參數(shù)
  • shouldStartCountting(true)浪耘，開始倒計痛倚，但按鈕仍不可點擊抒蚜，直到倒計時結束
  • shouldStartCountting(false)， 按鈕恢復可點擊狀態(tài)器贩，但不會開始倒計時

---

更新： 切換到后臺驗證碼倒計時跑秒不受影響

---

17/07/25 更新：
1、更換貼圖
2徒像、發(fā)布到npm
支持通過 npm 命令安裝和使用

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

更新
添加屬性timerActiveTitle（Array）

具體用法請移步 GitHub