React Native 中实现倒计时功能
正文
在 React Native,该如何实现一个倒计时功能呢?
首次实现
表面看来很简单,譬如像下面这样:
const timer = useRef<ReturnType<typeof setInterval> | null>(null) const [count, setCount] = useState(0) const start = () => { setCount(10) timer.current = setInterval(() => { setCount((count) => count - 1) }, 1000) } useEffect(() => { if (count === 0 && timer.current !== null) { clearInterval(timer.current) timer.current = null } }, [count])
这段代码大多数情况下是可以正常工作的。但是你将应用退到后台,稍后再进入看看。
很有可能,原本应该结束的倒计时,还在工作。
这是因为 React Native 应用退到后台后,世界会停止。为了适应这点,我们应该先设定希望倒计时结束的时间,然后每隔一秒计算一次当前时间与结束时间之差(秒)。
此外,当应用退到后台时,应该清除定时器。
最终实现
考虑上述种种,倒计时的实现并不简单。
我们可以封装一个自定义 Hook 来提供可复用的倒计时功能。
import { useAppState } from '@react-native-community/hooks' import { useCallback, useEffect, useRef, useState } from 'react' export function useCountdown(seconds = 30) { const timer = useRef<ReturnType<typeof setInterval> | null>(null) const [target, setTarget] = useState<Date | null>(null) const [count, setCount] = useState<number>(0) const appState = useAppState() const start = useCallback(() => { setTarget(add(new Date(), seconds)) }, [seconds]) const stop = useCallback(() => { setTarget(null) setCount(0) }, []) useEffect(() => { if (target === null || appState !== 'active') { return } setCount(diff(new Date(), target)) timer.current = setInterval(() => { setCount(diff(new Date(), target)) }, 1000) return () => { if (timer.current) { clearInterval(timer.current) timer.current = null } } }, [target, appState]) useEffect(() => { if (count === 0) { stop() } }, [count, stop]) return { count, start, stop } } function add(date: Date, seconds: number) { return new Date(date.getTime() + seconds * 1000) } function diff(now: Date, target: Date) { return Math.max( Math.trunc((target.getTime() - now.getTime()) / 1000 + 0.5), 0 ) }
示例
这里有一个示例,供你参考。
以上就是React Native 中实现倒计时功能的详细内容,更多关于React Native倒计时的资料请关注脚本之家其它相关文章!
相关文章
使用Electron构建React+Webpack桌面应用的方法
本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12解决React报错Parameter 'props' implicitly&nb
这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12关于React Native报Cannot initialize a parameter of type''NSArra
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下2021-05-05如何将你的AngularJS1.x应用迁移至React的方法
本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-02基于react hooks,zarm组件库配置开发h5表单页面的实例代码
这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-04-04
最新评论