如何在 React Native 中使用倒数计时器？

本文将提供如何在 react native 中使用倒数计时器的示例。
如果您对 react-native 中的倒数计时器有疑问，那么我将给出一个简单的解决方案示例。
在这里，您将学习如何使用 react native 创建倒数计时器。
你将学习如何在 react native 中实现倒数计时器。你只需要一些步骤来完成反应原生倒数计时器示例。

让我们开始下面的例子：
第 1 步：下载项目

在第一步中运行以下命令来创建一个项目。

expo init ExampleApp

第 2 步：安装和设置

首先你必须安装 react-native-countdown-component 包和 moment 包。

npm install react-native-countdown-component

npm install moment --save

Step 3: App.js

在这一步中，您将打开 App.js 文件并放置代码。

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import CountDown from 'react-native-countdown-component';
import moment from 'moment';

const App = () => {
    const [totalDuration, setTotalDuration] = useState(0);

    useEffect(() => {
        let date = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss');
        let expirydate = '2022-07-16 12:00:00';

        let diffr = moment.duration(moment(expirydate).diff(moment(date)));

        var hours = parseInt(diffr.asHours());
        var minutes = parseInt(diffr.minutes());
        var seconds = parseInt(diffr.seconds());

        var d = hours * 60 * 60 + minutes * 60 + seconds;
        
        setTotalDuration(d);
    }, []);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <Text style={styles.title}>
                    React Native CountDown Timer 
                </Text>
                <CountDown
                    until={totalDuration}
                    timetoShow={('H', 'M', 'S')}
                    onFinish={() => alert('finished')}
                    onPress={() => alert('hello')}
                    size={20}
                />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        textAlign: 'center',
        fontSize: 20,
        fontWeight: 'bold',
        padding: 20,
    },
});

export default App;

运行项目

在最后一步中，使用以下命令运行您的项目。