React?Native?中實(shí)現(xiàn)倒計(jì)時(shí)功能

更新時(shí)間：2022年08月09日 09:08:41 作者：todoit

這篇文章主要介紹了React?Native中實(shí)現(xiàn)倒計(jì)時(shí)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在 React Native，該如何實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能呢？

首次實(shí)現(xiàn)

表面看來很簡單，譬如像下面這樣：

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])

這段代碼大多數(shù)情況下是可以正常工作的。但是你將應(yīng)用退到后臺，稍后再進(jìn)入看看。

很有可能，原本應(yīng)該結(jié)束的倒計(jì)時(shí)，還在工作。

這是因?yàn)?React Native 應(yīng)用退到后臺后，世界會停止。為了適應(yīng)這點(diǎn)，我們應(yīng)該先設(shè)定希望倒計(jì)時(shí)結(jié)束的時(shí)間，然后每隔一秒計(jì)算一次當(dāng)前時(shí)間與結(jié)束時(shí)間之差（秒）。

此外，當(dāng)應(yīng)用退到后臺時(shí)，應(yīng)該清除定時(shí)器。

最終實(shí)現(xiàn)

考慮上述種種，倒計(jì)時(shí)的實(shí)現(xiàn)并不簡單。

我們可以封裝一個(gè)自定義 Hook 來提供可復(fù)用的倒計(jì)時(shí)功能。

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
  )
}