轉載【React Native代碼】手寫驗證碼倒計時組件

　　實例代碼：

import React, { Component , PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity
} from 'react-native';

const DownButtonState = {
    DownButtonActive : 0,
    DownButtonDisable : 1,
}

// {id , startTime, deathCount}
var timeRecodes = [];  //根據id來記錄LCCountDownButton的信息

export default class DownButton extends Component {

    // 構造
    constructor(props) {
        super(props);
        // 初始狀態
        this.state={
            btnTitle:'預設'
        }
    }

    // static propTypes = {
    //     id:React.PropTypes.string,          //按鈕的身份標識,同一個頁面的按鈕是同一個id
    //     beginText:React.PropTypes.string,   //初始狀態按鈕title
    //     endText:React.PropTypes.string,     //讀秒結束後按鈕的title
    //     count:React.PropTypes.number,       //計時數
    //     pressAction:React.PropTypes.func,   //按下按鈕的事件,但是觸發倒數需要你自己來調用方法
    //     changeWithCount:React.PropTypes.func,   //讀秒變化的函數,該函數帶有一個參數count,表示當前的剩餘事件
    //     end:React.PropTypes.func,           //讀秒完畢後的函數
    //     frameStyle:View.propTypes.style    //初始化的位置大小
    // }

    buttonState = DownButtonState.DownButtonActive;

    componentWillMount() {
        this.shouldSetState = true;
        this.state = {
            btnTitle:this.props.beginText,
        }
    }

    componentDidMount() {
        const {id,changeWithCount} = this.props;
        for(var i = 0 ; i<timeRecodes.length ; i ++){
            let obj = timeRecodes[i];
            if (obj.id === id){
                let liveTime = Date.now() - obj.startTime
                if (liveTime < obj.deathCount * 1000){
                    //避免閃動
                    let detalTime = Math.round(liveTime/1000);
                    let content = changeWithCount(obj.deathCount - detalTime);
                    this.setState({
                        btnTitle:content
                    });
                    //手動調用倒計時
                    this.startCountDownWithCount(obj.startTime)
                }
            }
        }

    }

    clearTime(){
        if (this.interval){
            clearInterval(this.interval)
        }
    }

    componentWillUnmount() {
        this.shouldSetState = false;
        this.clearTime();
    }

    startCountDownWithCount(startTime){
        this.buttonState = DownButtonState.DownButtonDisable;
        const {changeWithCount,endText,count,end}= this.props;
        this.startTime = startTime;
        this.interval = setInterval(()=>{
            let detalTime = Math.round((Date.now() - this.startTime)/1000);
            let content = changeWithCount(count - detalTime);
            if (detalTime >= count){
                content = endText;
                this.clearTime();
                end && end();
                this.buttonState = DownButtonState.DownButtonActive;
            }
            if(this.shouldSetState){
                this.setState({
                    btnTitle:content
                })
            }
        },1000)
    }

    recordButtonInfo(){
        const {id , count} = this.props;
        var hasRecord = false;
        for (var i = 0 ; i < timeRecodes.length ; i ++){
            let obj = timeRecodes[i];
            if(obj.id === id){
                obj.startTime = Date.now();
                hasRecord = true;
                break;
            }
        }
        if (!hasRecord){
            let buttonInfo = {
                id:id,
                deathCount:count,
                startTime:Date.now()
            }
            timeRecodes.push(buttonInfo)
        }
    }

    //外界調用
    startCountDown(){
        this.startCountDownWithCount(Date.now());
        this.recordButtonInfo();
    }

    render(){
        let isDisable = this.buttonState === DownButtonState.DownButtonDisable;
        const {frameStyle} = this.props
        return (
            <TouchableOpacity disabled={isDisable}
                              onPress={()=>{this.props.pressAction && this.props.pressAction()}}
                              style={[styles.buttonCommonStyle,isDisable?styles.disableButtonStyle:styles.activeButtonStyle,frameStyle]}
            >
                <Text style={[styles.txtCommonStyle,isDisable?styles.disableTxtStyle:styles.activeTxtStyle]}>
                    {this.state.btnTitle}
                </Text>
            </TouchableOpacity>
        );
    }


}

const styles = StyleSheet.create({

    buttonCommonStyle:{
        paddingRight:8,
        paddingLeft:8,
        paddingTop:8,
        paddingBottom:8,
        justifyContent:'center',
        alignItems:'center'
    },
    //禁用時候的TouchableOpacity樣式
    disableButtonStyle:{
        // backgroundColor:'red',
    },
    //可以點擊時候的TouchableOpacity樣式
    activeButtonStyle:{
        // backgroundColor:'green',
    },

    txtCommonStyle:{
        fontSize:14,
    },
    //禁用時候的Text樣式
    disableTxtStyle:{
        color:'#7189D0',
    },
    //可以點擊時候的Text樣式
    activeTxtStyle:{
        color:'#767d72',
    }
});

　　使用：

<DownButton 
                                                   beginText='獲取驗證碼'
                                                   endText='再次獲取驗證碼'
                                                   count={60}
                                                   pressAction={()=>{this.onPressGetCode()}}
                                                   changeWithCount={(count)=> count + 's後重新獲取'}
                                                   id='register'
                                                   ref={(e)=>{this.countDownButton=e}}
                                />

　　代碼源：https://www.cnblogs.com/pengsi/p/7681961.html