React Native TypeScript Hooks 实现Tab导航下的正确计时器行为

问题根因 #

当前交互异常的核心原因是：Tab导航下的TimerScreen页面默认是保活状态，不会在每次跳转时重新挂载，原实现仅在组件首次挂载时读取Home页传递的时长参数赋值给本地倒计时状态，后续点Go传新参数时，由于组件没有重新触发状态更新流程，就会出现计时器不重置的问题。

具体实现步骤 #

• 依托React Navigation的route参数订阅能力，在TimerScreen内用useEffect监听Home页传递的duration、id参数变化，而不是仅在首次挂载时读取参数
• 监听到参数变化时，先清除上一次运行的倒计时定时器，避免多个定时器并行运行
• 将本地存储的当前倒计时值直接重置为传入的初始时长
• 重新启动新的倒计时流程
• 因为Tab导航切换页面时不会修改route参数，上述监听逻辑不会触发，刚好匹配「切Tab不重置计时器」的规则

核心参考代码片段：

// TimerScreen 内部核心逻辑
import { useRef, useState, useEffect } from 'react';

const [currentTime, setCurrentTime] = useState(0);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

// 入参变化时触发重置逻辑
useEffect(() => {
  // 清理旧定时器
  if (timerRef.current) clearInterval(timerRef.current);

  // 重置为传入的初始时长，默认取配置的初始值
  const targetDuration = route.params?.duration ?? 0;
  setCurrentTime(targetDuration);

  // 启动倒计时
  timerRef.current = setInterval(() => {
    setCurrentTime(prev => {
      // 计时归0时自动停止
      if (prev <= 0) {
        if (timerRef.current) clearInterval(timerRef.current);
        return 0;
      }
      return prev - 1;
    })
  }, 1000);

  // 组件卸载时统一清理，避免内存泄漏
  return () => {
    if (timerRef.current) clearInterval(timerRef.current);
  }
}, [route.params?.duration, route.params?.id])

• 抽离可复用的倒计时逻辑
  将倒计时的启动、停止、重置、状态计算逻辑封装为独立的自定义Hook（如useCountdown），避免所有逻辑堆在页面组件里。页面层仅需调用Hook暴露的状态和方法，后续迭代、单元测试都会更方便。
• 完善TypeScript路由类型定义
  全局定义各路由页面的入参类型，避免开发过程中用any绕开类型检查。比如为Timer页定义入参类型后，TS会在传参、读参阶段自动校验字段名、字段值类型，提前暴露传参错误。
• 优化计时精度
  单纯靠setInterval逐秒减1的实现方案，在JS线程阻塞、RN切后台时容易出现计时偏差。建议改为基于时间戳的计算逻辑：启动计时时记录目标截止时间，每次触发tick时通过当前时间和截止时间的差值计算剩余时长，哪怕出现tick卡顿，回到前台后也能拿到准确的剩余时间。
• 统一常量配置
  把页面初始默认值（id=-1、timerName="initial name"、duration=0等）抽为独立的常量配置文件，避免硬编码散落在代码各个角落，后续调整默认值时无需逐个文件排查。
• 入参校验兜底
  在Home页点击Go跳转前，先对用户输入的时长、标签做合法性校验（比如时长不能为负、标签为空时给默认值），避免非法参数传入Timer页导致异常逻辑（如倒计时跑成负数）。
• 核对Tab导航保活配置
  确认底部Tab导航没有开启unmountOnBlur类配置——该配置会导致切走Tab时组件被销毁，再次切回时会重新挂载重置状态，和你要求的切Tab不重置规则冲突。

内容的提问来源于stack exchange，提问作者Jordan Barrilleaux