navigation.push 上的 clearInterval() 反应

Question

I wrote some code to set an Interval on my dealScreen :

let timer;
  useEffect(() => {
        timer = setInterval(() => { 
          console.log('test');
        }, 1000);
    return () => clearInterval(timer);
  }, []);

When navigating to another page with navigation.push the Interval isn't cleared. How can I force the interval to be cleared on navigation . Because it is a stack so I think the page is still behind the new page.

When using navigation.replace it works but then I have no correct history back.

Answer 1

Try to call the clearInterval(timer) function when you trying to navigate.

Example:

  let timer;
  useEffect(() => {
    timer = setInterval(() => {
      console.log('test');
    }, 1000);
  }, []);

  const navigateToNextScreen = () => {
    clearInterval(timer);
    navigation.push('Next Sreen');
  };

I hope this help you out. Thanks.