如何每次在同一个视图上与 react native expo 倒计时

Posted 2023-03-12

【中文标题】如何每次在同一个视图上与 react native expo 倒计时

【英文标题】：how do count down every time on same view with react native expo

【发布时间】：2021-05-06 13:23:25

【问题描述】：

我是新来的反应和反应本机。我正在使用 expo cli 构建一个反应原生应用程序。每次用户查看视图时如何重新开始倒计时？卸载不起作用，因为这永远不会卸载。 我想要的是倒数到 15 到 0，然后显示继续按钮，但这只能工作一次。

function ContinueStatus( onContinuePress ) 
      let [count, setTimer] = useState(15);
  let [isStarted, setIsStarted] = useState(true);

  useEffect(() => 
    let interval = setInterval(() => 
      setTimer(lastTimerCount => 
          lastTimerCount <= 1 && clearInterval(interval);
          count = lastTimerCount;
          return lastTimerCount - 1
      )
    , 1000) 
    //cleanup the interval on complete
    return () => clearInterval(interval)
  , [isStarted]);

    return( 
      count > 0 ?
        (<Button color="primary" style=styles.createButton>
        <Text bold size=14 color=myTheme.COLORS.WHITE>
          Continue in count second(s)
        </Text>
        </Button> )
      :
       (<Button color="primary" style=styles.createButton onPress=onContinuePress >
            <Text bold size=14 color=myTheme.COLORS.WHITE>
              Continue
            </Text>
          </Button> 
       )
  ) 

render()  
    return (
          <ContinueStatus onContinuePress=this.onContinuePress/> 
  );

【问题讨论】：

所以每次用户进入屏幕，倒计时都会重新开始？

是的，这就是我想要的

【参考方案1】：

问题是当你离开它时你的组件没有卸载。这是 ReactJS 和 React Native 之间的一个显着区别。这个问题可以通过React Navigation和useFocusEffect钩子解决。

useFocusEffect 类似于 React 的 useEffect 钩子。唯一的区别是它仅在屏幕当前聚焦时运行。

因此，将useEffect 替换为useFocusEffect 并确保使用useCallback，就像它描述的in the docs 一样。

您可能还需要通过提供商设置路由器，但不要先尝试。

【讨论】：

谢谢，我尝试了 useFocusEffect 但没有用。我想我必须设置路由器......我希望不要这样做

您如何在屏幕之间导航？

使用其中一个移动模板并且它正在使用 Stack.Navigator

好的，你还需要清理你的代码 - 将你所有的 lets 更改为 consts。这些变量应该是不可变的。那么，为什么需要这条线？ count = lastTimerCount;

是的，我正在测试，但这仍然不能解决我的问题

【参考方案2】：

我从这篇文章中找到了一种方法。

https://aboutreact.com/refresh-previous-screen-react-navigation/