如何通过函数调用停止react-native-timer-countdown计时器？求解决方案

Hey there! From what I know about the react-native-timer-countdown package, it doesn’t natively support stopping the timer via a direct function call out of the box—it’s built to run until the countdown completes automatically. But don’t worry, there are a couple of reliable workarounds to add this control:

Workaround 1: Use a Ref + Conditional Rendering #

You can manage the timer’s execution by combining a React ref with a state variable to toggle its visibility. Here’s how to implement it:

1. Set up a state to track if the timer should be active:

import { useState, useRef } from 'react';
import TimerCountdown from 'react-native-timer-countdown';

function ControlledTimer() {
  const [isTimerActive, setIsTimerActive] = useState(true);
  const timerRef = useRef(null);

  // Function to stop the timer
  const stopTimer = () => {
    setIsTimerActive(false);
    // You can toggle isTimerActive back to true later if you need to restart
  };

  return (
    <>
      {isTimerActive && (
        <TimerCountdown
          ref={timerRef}
          seconds={120}
          onTimeElapsed={() => setIsTimerActive(false)}
          // Add your existing props here
        />
      )}
      <Button title="Stop Countdown" onPress={stopTimer} />
    </>
  );
}

This works by unmounting the timer component when isTimerActive switches to false, which immediately halts the countdown.

Workaround 2: Build a Custom Timer Component #

If you want full, granular control (like pause, resume, and stop), building a custom timer with setInterval is a great option. Here’s a simple, flexible example:

import { useState, useEffect, useRef } from 'react';
import { Text, Button, View } from 'react-native';

function CustomCountdown({ initialSeconds }) {
  const [remainingSeconds, setRemainingSeconds] = useState(initialSeconds);
  const intervalRef = useRef(null);

  // Start timer on component mount
  useEffect(() => {
    startTimer();
    return () => clearInterval(intervalRef.current);
  }, []);

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setRemainingSeconds(prev => {
        if (prev <= 1) {
          clearInterval(intervalRef.current);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  };

  const stopTimer = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };

  const resetTimer = () => {
    stopTimer();
    setRemainingSeconds(initialSeconds);
    startTimer();
  };

  return (
    <View>
      <Text>{remainingSeconds} seconds remaining</Text>
      <Button title="Stop Timer" onPress={stopTimer} />
      <Button title="Reset Timer" onPress={resetTimer} />
    </View>
  );
}

This custom component gives you direct control to stop, start, or reset the timer whenever you need it.

Either approach should solve your problem—pick the one that aligns best with your app’s needs!

内容的提问来源于stack exchange，提问作者Debadrita Bose