react native（expo）倒计时组件

日渐消瘦 - 来自一个高龄程序员的心声

于 2024-09-14 11:07:41 发布

阅读量27

点赞数 1

分类专栏：玩转react native 文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_23404533/article/details/142253425

版权

玩转react native 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接上代码：

import React, { useState, useEffect } from 'react';
import TextWrapper from '../TextWrapper';
import LogUtil from '../../../utils/log_util';

/**
 * 
 * minutes 请传毫秒值
 * onTimeElapsed 倒计时结束时触发回调
 * isUseOriginValue 是否使用原始值
 * style 样式
 */
const CountdownTimerView = ({ tipText, minutes, onTimeElapsed, showHours = true, showMinutes = true, isUseOriginValue = false, style }) => {
    LogUtil.log('CountdownTimerView - minutes = ', minutes / 1000);
    let [seconds, setSeconds] = useState(Math.ceil(minutes / 1000));

    useEffect(() => {
        setSeconds(Math.ceil(minutes / 1000));
    }, [minutes]);

    useEffect(() => {
        let interval;
        if (seconds > 0) {
            interval = setInterval(() => {
                setSeconds(rt => rt - 1);
            }, 1000);
        }
        if (seconds <= 0) {
            onTimeElapsed();
            interval && clearInterval(interval);
        }
        return () => interval && clearInterval(interval);
    }, [seconds, onTimeElapsed]);

    const formatTime = (time) => {
        // const date = new Date(time);
        // const hours = date.getHours();
        // const minutes = date.getMinutes();
        // const seconds = date.getSeconds();
        const hours = Math.floor(time / 3600); // 转换为小时
        const minutes = Math.floor((time % 3600) / 60); // 转换为分钟
        const seconds = time % 60; // 转换为秒钟
        LogUtil.log(`CountdownTimerView - formatTime: ${time}, seconds: ${seconds}`);
        if (showHours && showMinutes) {
            return hours + ":" + minutes + ":" + seconds;
        } else if (showHours && !showMinutes) {
            return hours + ":" + seconds;
        } else if (!showHours && showMinutes) {
            return minutes + ":" + seconds;
        } else {
            return seconds;
        }
    };

    return (
        <TextWrapper style={style}>
            {tipText ? tipText : ''}{isUseOriginValue ? seconds : formatTime(seconds)}
        </TextWrapper>
    );
};

export default React.memo(CountdownTimerView);

调用：

<CountdownTimerView
                    minutes={‘请传毫秒时间戳’}
                    onTimeElapsed={() => {
                        onTimeElapsed?.call();
                        LogUtil.log("CountdownTimerView - onTimeElapsed end")
                    }}
                    style={[stl.FCB2B2B2, stl.fontSize15]}
                />