fastman3-component-countdown

倒计时组件封装

CHANGELOG

v 1.0.0 - 2025.04.28

1. 初始化构建

v 1.0.1 - 2025.06.20

1. 解决倒计时组件ios里后台不处理的问题

v 1.0.2 - 2025.7.3

1. 修复倒计时组件样式走查问题

使用方式

import { Countdown,CountdownHandleRef } from "fastman3-component-countdown/es/index";

// 创建 Countdown ref
const countdownRef= useRef<CountdownHandleRef>(null);

// willappear里要调用update，解决ios后台不处理的问题
const willAppearFunc = useAfter(() => {
    countdownRef.current?.update();
});
if (isFromApp()) {
   willAppear(willAppearFunc);
}

    
// 定义倒计时组件的属性类型
type CountdownComponentProps = {
  position?: object; // 倒计时组件的位置
  seconds: number; // 倒计时的时间
  finish?: ()=>void; //  倒计时结束的回调，用于用户自定义处理
  userTaskID?: string; // 用户任务ID
  callback?: (status: boolean, error?: any)=> void; // 倒计时结束，IF096184调用之后的回调函数，可用于记录埋点事件
  containerStyle?: any; // 容器样式
  autoStart?: boolean; // 是否自动开始
};

// 使用
<Countdown
  seconds={30}
  finish={() => {
    handleFinish();
  }}
  position={{ bottom: "50px", right: "50px" }}
  userTaskID={'11111'}
  callback={callback}
  ref={countdownRef}
/>;

const callback = (status,error) => {
  if(status){
    // 成功
  } else {
    // 失败
    // 打印失败原因
    console.log(error);
  }
}

// 倒计时结束事件
const handleFinish = () => {
  console.log("倒计时完成！");
};
// 启动倒计时
const startCountdown = () => {
  countdownRef.current?.start();
};
// 停止倒计时
const stopCountdown = () => {
  countdownRef.current?.stop();
};
// 重置倒计时
const resetCountdown = () => {
  countdownRef.current?.reset();
};