如何使用 React-Native 和 Moment.js 創建倒計時組件？

Question

我正在使用 React-Native 創建簡單的倒計時組件，用於日期格式我正在使用moment.js ，我從 API 以秒格式調用數據，然后提供給子組件，我想將這種數據121轉換為2:01 ，如何使用時刻來達到這個結果並且不破壞性能？

 import { MaterialCommunityIcons } from "@expo/vector-icons"; import moment from "moment"; import React, { useEffect, useState} from "react"; import { View, Text} from "react-native"; const Timer: React.FC<{ expirationDate: number,focus:boolean, loading:boolean}> = ({ expirationDate, focus, loading}) => { const [inactive, setIncative] = useState(false); const [timerCount, setTimer] = useState<number>(0) //can be any number provided from props useEffect(() => { setTimer((prev:number)=> (expirationDate)) let interval = setInterval(() => { setTimer(lastTimerCount => { lastTimerCount <= 1 && clearInterval(interval) return lastTimerCount - 1 }) }, 1000) return () => clearInterval(interval) }, [loading]); return ( <View style={{ backgroundColor: expirationDate < 300 || inactive? "#edbcbc": "#cee5f4", width: 70, borderRadius: 7, paddingVertical: 6, flexDirection: "row", alignItems: "center", justifyContent: "center", position: "relative", }} > <View style={{ position: "relative", left: 4 }}> <MaterialCommunityIcons name="timer-outline" size={13} color={expirationDate < 300 || inactive? "#f54c4c": "#004978"} /> </View> //line sholud be changed <Text>{moment.duration(timerCount).format("h:mm")}</Text> </View> ); }; export default Timer;

Answer 1

我發現了獨奏：使用moment utc method並將 state 值轉換為毫秒

 import { MaterialCommunityIcons } from "@expo/vector-icons"; import moment from "moment"; import React, { useEffect, useState} from "react"; import { View, Text} from "react-native"; const Timer: React.FC<{ expirationDate: number,focus:boolean, loading:boolean}> = ({ expirationDate, focus, loading}) => { const [inactive, setIncative] = useState(false); const [timerCount, setTimer] = useState<number>(0) useEffect(() => { setTimer((prev:number)=> (expirationDate)) let interval = setInterval(() => { setTimer(lastTimerCount => { lastTimerCount <= 1 && clearInterval(interval) return lastTimerCount - 1 }) }, 1000) return () => clearInterval(interval) }, [loading]); return ( <View style={{ backgroundColor: expirationDate < 300 || inactive? "#edbcbc": "#cee5f4", width: 70, borderRadius: 7, paddingVertical: 6, flexDirection: "row", alignItems: "center", justifyContent: "center", position: "relative", }} > <View style={{ position: "relative", left: 4 }}> <MaterialCommunityIcons name="timer-outline" size={13} color={expirationDate < 300 || inactive? "#f54c4c": "#004978"} /> </View> <Text>{moment.utc(timerCount * 1000).format("mm:ss")}</Text> </View> ); }; export default Timer;