一個(gè)倒計(jì)時(shí)組件

優(yōu)點(diǎn)

1:程序進(jìn)入后臺(tái),繼續(xù)執(zhí)行倒計(jì)時(shí)
2:跳轉(zhuǎn)其他頁面繼續(xù)倒計(jì)時(shí)

直接上代碼

/*
 * @Author: Jonson 
 * @Date: 2020-02-14 23:36:42 
 * @Last Modified by: Jonson
 * 使用
 * <LCCountDownButton frameStyle={{top:44 * 3 + 4,right:10,width:120,height:36,position:'absolute'}}
        beginText='獲取驗(yàn)證碼'
        endText='再次獲取驗(yàn)證碼'
        count={10}
        pressAction={()=>{this.countDownButton.startCountDown()}}
        changeWithCount={(count)=> count + 's后重新獲取'}
        id='register'   
        ref={(e)=>{this.countDownButton=e}}
        />
 * 
 * @Last Modified time: 2020-02-16 00:05:32
 */
import React, { Component, PropTypes } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity
} from 'react-native';

const CountDownButtonState = {
    CountDownButtonActive: 0,
    CountDownButtonDisable: 1,
}

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

export default class CountDown extends Component {

    // 構(gòu)造
    constructor(props) {
        super(props);
        // 初始狀態(tài)
        this.state = {
            btnTitle: '默認(rèn)',
            buttonState: CountDownButtonState.CountDownButtonActive
        }
    }

    static defaultProps = {
        id: "id",           //按鈕的身份標(biāo)識(shí),同一個(gè)頁面的按鈕是同一個(gè)id
        beginText: "beginText",    //初始狀態(tài)按鈕title
        endText: "endText",      //讀秒結(jié)束后按鈕的title
        count: 60,             //總的計(jì)時(shí)數(shù) 單位是秒s
        pressAction: () => { },         //按下按鈕的事件,但是觸發(fā)倒數(shù)(startCountDown)需要你自己來調(diào)用
        changeWithCount: () => { },         //讀秒變化的函數(shù),該函數(shù)帶有一個(gè)參數(shù)count,表示當(dāng)前的剩余事件
        end: () => { },         //讀秒完畢后的回調(diào),讀秒結(jié)束觸發(fā)
        frameStyle: {},             //初始化的位置大小
        disableStyle: {},             //按鈕禁用的時(shí)候樣式                 (有默認(rèn),見底部styles)
        activeStyle: {},             //active情況下按鈕樣式              (有默認(rèn),見底部styles)
        disableTextStyle: {},             //按鈕禁用的時(shí)候里面文字的樣式        (有默認(rèn),見底部styles)
        activeTextStyle: {},             //active情況下按鈕里面文字的樣式      (有默認(rèn),見底部styles)
    }

    componentWillMount() {
        this.shouldSetState = true;
        this.setState({
            btnTitle: this.props.beginText,
            buttonState: CountDownButtonState.CountDownButtonActive
        })
    }

    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) {
                    //避免閃動(dòng)
                    let detalTime = Math.round(liveTime / 1000);
                    let content = changeWithCount(obj.deathCount - detalTime);
                    this.setState({
                        btnTitle: content
                    });
                    //手動(dòng)調(diào)用倒計(jì)時(shí)
                    this.startCountDownWithCount(obj.startTime)
                }
            }
        }

    }

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

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

    startCountDownWithCount(startTime) {
        this.setState({ buttonState: CountDownButtonState.CountDownButtonDisable });
        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.setState({ buttonState: CountDownButtonState.CountDownButtonActive });
            }
            if (this.shouldSetState) {
                this.setState({
                    btnTitle: content
                })
            }
        }, 100)
    }

    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)
        }
    }

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

    buttonPressed = () => {
        const { pressAction } = this.props;
        pressAction();
    }

    render() {
        let isDisable = this.state.buttonState == CountDownButtonState.CountDownButtonDisable;
        const { frameStyle, disableStyle, activeStyle, disableTextStyle, activeTextStyle }
            = this.props;
        return (
            <TouchableOpacity disabled={isDisable}
                onPress={this.buttonPressed}
                style={[
                    styles.buttonCommonStyle,
                    isDisable ? styles.disableButtonStyle : styles.activeButtonStyle,
                    isDisable ? disableStyle : activeStyle,
                    frameStyle
                ]}
            >
                <Text style={[
                    styles.txtCommonStyle,
                    isDisable ? styles.disableTxtStyle : styles.activeTxtStyle,
                    isDisable ? disableTextStyle : activeTextStyle
                ]}>
                    {this.state.btnTitle}
                </Text>
            </TouchableOpacity>
        );
    }


}

const styles = StyleSheet.create({

    buttonCommonStyle: {
        borderRadius: 3,
        borderWidth: 1,
        borderColor: 'gray',
        paddingRight: 8,
        paddingLeft: 8,
        paddingTop: 8,
        paddingBottom: 8,
        justifyContent: 'center',
        alignItems: 'center'
    },
    //禁用時(shí)候的TouchableOpacity樣式
    disableButtonStyle: {
        backgroundColor: 'red',
    },
    //可以點(diǎn)擊時(shí)候的TouchableOpacity樣式
    activeButtonStyle: {
        backgroundColor: 'green',
    },

    txtCommonStyle: {
        fontSize: 14,
    },
    //禁用時(shí)候的Text樣式
    disableTxtStyle: {
        color: 'gray',
    },
    //可以點(diǎn)擊時(shí)候的Text樣式
    activeTxtStyle: {
        color: 'black',
    }
});