React-Native时间进度条

React-Native时间进度条

import React, {Component} from "react";
import { StyleSheet, View, Text } from "react-native";
import DataStore from "../DataStore";
let timer // 全局定时器
class TimeProgressLine extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            progressValue: 0,
            startTime: 0,
            costTime: 0,
            minute: '--',
            second: '--'
        };
    }

    /**
     * @description: 页面渲染完成
     * @param {*}
     * @return {*}
     */
    componentDidMount() {
        let {time} = this.props;
        timer && clearInterval(timer);
        let totalTime = parseInt(time/1000);
        let minute = parseInt(totalTime/60);
        let second = totalTime % 60;
        this.setState({
            minute: minute,
            second: second
        }, () => {
            this.start();
        })
    }

    /**
     * @description: 卸载前清除定时器
     * @param {*}
     * @return {*}
     */
    componentWillUnmount() {
        timer && clearInterval(timer);
    }
    
    /**
     * @description:启动定时器
     * @param {*}
     * @return {*}
     */
    start = () => {
        let { progressValue, startTime } = this.state;
        let { time } = this.props;
        let totalTime = time / 1000;
        let currentTime = startTime;
        timer && clearInterval(timer);
        DataStore.log('TimeCost', '开始' + new Date().getTime());
        if (timer == null) {
            timer = setInterval(() => {
                if (currentTime >= totalTime) {
                    this.props.timeOut();
                    this.stop();
                } else {
                    currentTime++;
                    let progressValue = parseInt((currentTime / totalTime) * 755)
                    let timeback = totalTime -currentTime;
                    this.setState({
                        costTime: currentTime,
                        progressValue: progressValue,
                        minute: parseInt(timeback/60),
                        second: timeback%60
                    })
                }
            }, 1000)
        }
    }
  
    /**
     * @description:停止计时
     * @param {*}
     * @return {*}
     */
    stop = () => {
        this.setState({startTime: 0});
        timer && clearInterval(timer);
    }

    /**
     * @description:暂停计时
     * @param {*}
     * @return {*}
     */
    pause = () => {
        let {costTime} = this.state;
        timer && clearInterval(timer);
        this.setState({startTime: costTime})
    };

    /**
     * @description:继续计时
     * @param {*}
     * @return {*}
     */
     continue = () => {
        let { progressValue, startTime } = this.state;
        let { time } = this.props;
        let totalTime = time / 1000;
        let currentTime = startTime;
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        if (timer == null) {
            timer = setInterval(() => {
                if (currentTime >= totalTime) {
                    this.props.timeOut();
                    this.stop();
                } else {
                    currentTime++;
                    let progressValue = parseInt((currentTime / totalTime) * 755)
                    let timeback = totalTime -currentTime;
                    this.setState({
                        costTime: currentTime,
                        progressValue: progressValue,
                        minute: parseInt(timeback/60),
                        second: timeback%60
                    })
                }
            }, 1000)
        }
    }

    /**
     * @description: 清空定时器
     * @param {*}
     * @return {*}
     */
    clearTime = () => {
        timer && clearInterval(timer);
    }

    render() {
        return (
            <View style={styles.progressbox}>
                <View style={styles.progressgroup}>
                    <View style={[styles.progressbg, {width: this.state.progressValue}]}></View>
                </View>
                <View style={styles.timenum}>
                    <Text style={styles.timefon}>{this.state.minute}分</Text>
                    <Text style={styles.timefon}>{this.state.second}秒</Text>
                </View>
            </View>
        );
    }
}
var styles = StyleSheet.create({
    progressbox: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    progressgroup: {
        width: 755,
        height: 10,
        borderRadius: 18,
        borderStyle: "solid",
        borderColor: "#FFE6BB",
        backgroundColor: "#FFE6BB",
    },
    progressbg: {
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FF813E',
        borderRadius: 18,
        borderStyle: "solid",
        borderColor: "#FFE6BB"
    },
    timenum: {
        width: 120,
        display: 'flex',
        flexDirection: 'row',
        alignItems: "center",
        marginLeft: 20
    },
    timefon: {
        height: 27,
        fontSize: 20,
        fontWeight: '400',
        color: '#333333',
        lineHeight: 27,
        fontFamily: "HYZhengYuan-EEW, HYZhengYuan"
    }
});

export default TimeProgressLine;