如何使用 React-Native 和 Moment.js 创建倒计时组件？

Question

I am creating simple countdown component with React-Native, for date formatting I am using moment.js , I am getting data from API call in seconds format, then providing to child component, I want to transform this kind of data 121 into 2:01 , How to use moment to achieve this result and do not kill performance?

 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

I found solotion: using moment utc method and transform state value into miliseconds

 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;