如何在 React Native 中制作倒數計時器？

Question

我必須在 react-native 應用程序中制作一個倒數計時器，但我不知道該怎么做，我已經查找並找到了一些庫，例如 react-native-countdown 組件，但它沒有像 id 那樣工作，並得到了一些其他解決方案，如 setInterval但我不知道如何在我的代碼中實現它並使其顯示在屏幕上，如下圖所示：

當用戶滑動條時，時間從 00:00 變為 60:00 (MM:SS)，這會在 05:00 之前更改數字 05:00，我已經這樣做了，但是使用 static 數字，我無法讓它倒計時.

這是我的代碼現在的樣子：

import { useNavigation } from '@react-navigation/core';
import React, { useEffect, useState } from 'react';
import { SafeAreaView, Text, Image, TouchableOpacity, StyleSheet, Dimensions, TextInput, KeyboardAvoidingView, Platform, View } from 'react-native';
import Slider from '@react-native-community/slider';
import CountDown from 'react-native-countdown-component';

import abacatezinImg from '../assets/abacatezinin.png';
import botaoStop from '../assets/botaoStop.png';
import botaoPlay from '../assets/botaoPlay.png';



export function Timer(){
    const [range, setRange] = useState('0');
    const [sliding, setSliding] = useState('Inactive');
    const [isSecureEntry,setIsSecureEntry]=useState(true);
    const navigation = useNavigation<any>();
    
    function handleQuit(){
        navigation.navigate('Quit');
    }
    if(isSecureEntry){
    return(
        <SafeAreaView style={styles.container}>
            <Text style={styles.texto}>{range}</Text>
        <View style={styles.container2}>
            
            <Slider 
            style={styles.slider}
            minimumValue={0}
            maximumValue={60}
            minimumTrackTintColor='#7E9F70'
            maximumTrackTintColor='#A7C99A'
            thumbImage={abacatezinImg}
            value={30}
            onValueChange={value => setRange(parseInt(value) + ':00')}
            onSlidingStart={() => setSliding('Sliding')}
            onSlidingComplete={() => setSliding('Inactive')}
            step={5}
            />
            <TouchableOpacity onPress={() =>{
                setIsSecureEntry((prev)=> !prev)
            }}>
                    <Image source={botaoPlay} style={styles.bPlay}/>
            </TouchableOpacity>
        </View>

        </SafeAreaView>
    );
        }
        else{
            return(
                <SafeAreaView style={styles.container}>
                    <Text style={styles.texto}>{range}</Text>
                <View style={styles.container3}>
                    <TouchableOpacity onPress={handleQuit}>
                            <Image source={botaoStop} style={styles.bStop}/>
                    </TouchableOpacity>
                </View>
        
                </SafeAreaView>
            );
        }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    container2:{
        backgroundColor: '#E4F0E2',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row',
        borderRadius: 100,
        width: 327,
        height: 66,
        paddingHorizontal: 19,
        marginTop: 20,
    },
    container3:{
        alignItems: 'center',
        justifyContent:'space-between',
        marginTop: 20,
    },
    slider:{
        width: 209,
        height: 50,
        transform: [{scaleY: 4}]
    },
    bPlay:{
        width: 50,
        height: 50,
    },
    bStop:{
        width: 66,
        height: 66,
    },
    texto:{
        fontWeight: '300',
        fontSize: 58,
        lineHeight: 87,
        letterSpacing: 0.03,
        color: '#1B3810',
    },
})

如果有人知道如何制作它，我將感謝您的幫助

Answer 1

在反應中使用 setInterval 掛鈎（使用 useEffect）倒計時 - 本機：

const [timerCount, setTimer] = useState(60)

useEffect(() => {
    let interval = setInterval(() => {
        setTimer(lastTimerCount => {
            if (lastTimerCount == 0) {
                //your redirection to Quit screen
            } else {
                lastTimerCount <= 1 && clearInterval(interval)
                return lastTimerCount - 1
            }
        })
    }, 1000) //each count lasts for a second
    //cleanup the interval on complete
    return () => clearInterval(interval)
}, []);

使用 state 變量 timerCount 作為：

<Text>{timerCount}</Text>