当使用React Native更改路由时，如何销毁组件或停止其执行

Question

我正在使用React Native创建简单的倒计时组件，并使用此包react-native-countdown-component，我想销毁此Timer组件或在焦点屏幕更改时停止执行，对于底部导航，我使用React-Native Tab navigation，实现此结果的最佳解决方案是什么？

import { MaterialCommunityIcons } from "@expo/vector-icons";
import React, { useEffect, useState } from "react";
import { View } from "react-native";
import CountDown from "react-native-countdown-component";
const Timer: React.FC<{ expirationDate: number }> = ({ expirationDate }) => {
const [timer, setCurrentTime] = useState<number>(expirationDate);
const [inactive, setIncative] = useState(false);
return (
<View
style={{
backgroundColor: timer < 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={timer < 300 || inactive ? "#f54c4c" : "#004978"} />
</View>
<CountDown
until={timer}
timeToShow={["M", "S"]}
timeLabels={false}
digitStyle={{ backgroundColor: "#f5f5f500" }}
separatorStyle={{ color: "#004978", fontSize: 10 }}
digitTxtStyle={{ color: timer < 300 || inactive ? "#f54c4c" : "#004978" }}
onFinish={() => setIncative(true)}
size={9}
running={timer ? true : false}
showSeparator
/>
</View>
);
};
export default Timer;

Answer 1

CountDown组件管理计时器本身，库作者在组件卸载时清除计时器https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58

Answer 2

请阅读此链接：

https://github.com/talalmajali/react-native-countdown-component/blob/master/index.js#L58

如果你有任何问题，你可以问它