reactjs - 如何使用 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