react-native 自定义倒计时按钮

最近研究了一下倒计时，网上有不少第三方开源库，不过试了试，有的并不好用，写法也停留在ES5上，而我写的demo使用的是0.45版本的RN，改起来很是麻烦。于是就参考react-native-CountDowntimer实现了一下倒计时按钮，效果还不错~ http://www.jianshu.com/p/f5925a95c01b

一、效果图

1.ios效果图

QQ20170623-110612.gif

2.android效果图

QQ20170623-134441.png

二、基本原理

1.作为一个组件，要做到灵活可变：

我们将要使其样式、提示文字及显示方式可以自定义。那就要将文字样式，提示文字(包括显示的时间数字，时间单位等)都定义为组件属性，可以由调用者灵活定义。

2.基本原理：

首先用户输入一个结束时间，我们需要声明一个state，再写一个计时器，我们每隔1s就通过输入的结束时间和当前时间计算出时间差，再通过算法将时间差计算成xx天xx时xx分xx秒的格式，更改state的值，通过state的更改及判断计算结果，在render()方法中控制时间的显示及更新。

三、代码实现

（一）自定义倒计时组件

新建countDown.js

/**
 * Created by sybil052 on 2017/6/22.
 */
import React, {
    Component,
    PropTypes,
} from 'react';

import {
    StyleSheet,
    View,
    Text,
} from 'react-native';

const styles = StyleSheet.create({
    text: {
        fontSize: 30,
        color: '#FFF',
        marginLeft: 7,
    },
    container: {
        flexDirection: 'row',
    },
    // 时间文字
    defaultTime: {
        paddingHorizontal: 3,
        backgroundColor: '#555555',
        fontSize: 12,
        color: '#fff',
        marginHorizontal: 3,
        borderRadius: 2,
    },
    // 冒号
    defaultColon: {
        fontSize: 12,
        color: '#555555'
    },
    // 提示
    defaultTip: {
        fontSize: 12,
        color: '#555555',
    }
});

class CountDown extends Component {
    static displayName = 'Simple countDown';
    // 属性
    static propTypes = {
        tip: PropTypes.string,
        date: PropTypes.string,
        days: PropTypes.objectOf(PropTypes.string),
        hours: PropTypes.string,
        mins: PropTypes.string,
        segs: PropTypes.string,
        onEnd: PropTypes.func,

        containerStyle: View.propTypes.style,
        daysStyle: Text.propTypes.style,
        hoursStyle: Text.propTypes.style,
        minsStyle: Text.propTypes.style,
        secsStyle: Text.propTypes.style,
        firstColonStyle: Text.propTypes.style,
        secondColonStyle: Text.propTypes.style,
        tipStyle: Text.propTypes.style,
    };
    // 默认属性
    static defaultProps = {
        date: new Date(),
        days: {
            plural: '天',
            singular: '天',
        },
        hours: ':',
        mins: ':',
        segs: ':',
        tip: '',
        onEnd: () => {},

        containerStyle: styles.container, // container 的style
        daysStyle: styles.defaultTime, // 天数 字体的style
        hoursStyle: styles.defaultTime, // 小时 字体的style
        minsStyle: styles.defaultTime, // 分钟 字体的style
        secsStyle: styles.defaultTime, // 秒数 字体的style
        firstColonStyle: styles.defaultColon, // 从左向右 第一个冒号 字体的style
        secondColonStyle: styles.defaultColon, // 从左向右 第2个冒号 字体的style
        tipStyle: styles.defaultTip, // 提示字体style
    };
    state = {
        days: 0,
        hours: 0,
        min: 0,
        sec: 0,
    };
    componentDidMount() {
        this.interval = setInterval(()=> {
            const date = this.getDateData(this.props.date);
            if (date) {
                this.setState(date);
            } else {
                this.stop();
                this.props.onEnd();
            }
        }, 1000);
    }
    componentWillMount() {
        const date = this.getDateData(this.props.date);
        if (date) {
            this.setState(date);
        }
    }
    componentWillUnmount() {
        this.stop();
    }
    getDateData(endDate) {
        endDate = endDate.replace(/-/g,"/");
        console.log('end',new Date(endDate));
        console.log('now',new Date);
        // console.log('end===',Date.parse(new Date(endDate)));
        // console.log('now===',Date.parse(new Date));
        let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date)) / 1000;
        if (diff <= 0) {
            return false;
        }
        // console.log('===========',diff);
        const timeLeft = {
            years: 0,
            days: 0,
            hours: 0,
            min: 0,
            sec: 0,
            millisec: 0,
        };

        if (diff >= (365.25 * 86400)) {
            timeLeft.years = Math.floor(diff / (365.25 * 86400));
            diff -= timeLeft.years * 365.25 * 86400;
        }
        if (diff >= 86400) {
            timeLeft.days = Math.floor(diff / 86400);
            diff -= timeLeft.days * 86400;
        }
        if (diff >= 3600) {
            timeLeft.hours = Math.floor(diff / 3600);
            diff -= timeLeft.hours * 3600;
        }
        if (diff >= 60) {
            timeLeft.min = Math.floor(diff / 60);
            diff -= timeLeft.min * 60;
        }
        timeLeft.sec = diff;
        return timeLeft;
    }
    render() {
        const countDown = this.state;
        let days;
        if (countDown.days === 1) {
            days = this.props.days.singular;
        } else {
            days = this.props.days.plural;
        }
        return (
            <View style={this.props.containerStyle}>
                { this.props.tip ? <Text style={this.props.tipStyle}>{this.props.tip}</Text> : null}
                { (countDown.days > 0) ? <Text style={this.props.daysStyle}>{ this.leadingZeros(countDown.days)+days}</Text> : null}
                { countDown.hours > 0 ? <Text style={this.props.hoursStyle}>{ this.leadingZeros(countDown.hours)}</Text> : null}
                { countDown.hours > 0 ? <Text style={ this.props.firstColonStyle}>{this.props.hours}</Text> : null}
                <Text style={this.props.minsStyle}>{this.leadingZeros(countDown.min)}</Text>
                <Text style={this.props.secondColonStyle}>{this.props.mins}</Text>
                <Text style={this.props.secsStyle}>{this.leadingZeros(countDown.sec)}</Text>
                <Text style={this.props.secondColonStyle}>{this.props.segs}</Text>
            </View>
        );
    }
    stop() {
        clearInterval(this.interval);
    }
    // 数字前面补0
    leadingZeros(num, length = null) {
        let length_ = length;
        let num_ = num;
        if (length_ === null) {
            length_ = 2;
        }
        num_ = String(num_);
        while (num_.length < length_) {
            num_ = '0' + num_;
        }
        return num_;
    }
}

export default CountDown;

（二）具体使用

来说下我们要实现的效果，传入一个结束时间，开始倒计时，倒计时中，抢单按钮可以点击，当倒计时结束，按钮置灰且不可点击。

新建demo.js

/**
 * Created by sybil052 on 2017/6/19.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';

import CountDown from '../../components/countDown';

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state={
            isEnd: false
        }
    }
    componentDidMount() {
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    disabled={this.state.isEnd}
                    onPress={() => {
                        alert('抢单');
                }}>
                    <View style={{
                        backgroundColor: this.state.isEnd ? '#666666': '#008BCA',
                        borderRadius: 5,
                        margin:20,
                        padding:12,
                        flexDirection:'row',
                        justifyContent:'center',
                    }}>
                        <Text style={{
                            fontSize: 15,
                            color: 'white',
                            lineHeight: 17,
                            marginRight: 5
                        }}>抢单</Text>
                        <CountDown
                            date="2017-06-23 11:04:30"
                            days={{plural: '天 ',singular: '天 '}}
                            hours='时'
                            mins='分'
                            segs='秒'
                            tip='还剩'
                            daysStyle={styles.time}
                            hoursStyle={styles.time}
                            minsStyle={styles.time}
                            secsStyle={styles.time}
                            firstColonStyle={styles.colon}
                            secondColonStyle={styles.colon}
                            tipStyle={styles.tip}
                            onEnd={() => {
                                this.setState({
                                    isEnd: true
                                })
                            }}
                        />
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles =StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    //时间文字
    time: {
        paddingHorizontal: 2,
        fontSize: 13,
        color: 'white',
        textAlign: 'center',
        lineHeight: 17,
    },
    //冒号
    colon: {
        fontSize: 13,
        color:'white',
        textAlign: 'center',
        lineHeight: 17,
    },
    tip:{
        color: 'white',
        textAlign: 'center',
        fontSize: 13,
        lineHeight: 17
    }
});

function mapStateToProps(state){
    return {};
}

function mapDispatchToProps (dispatch){
    return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(Demo);

好了，自定义的倒计时按钮就写好了~希望对你们有所帮助！！！