react native 实现时间

React Native 实现时间功能

在 React Native 中实现时间功能可以通过多种方式完成，包括显示当前时间、倒计时、计时器等。以下是一些常见的实现方法：

显示当前时间

使用 JavaScript 的 Date 对象可以轻松获取和显示当前时间。以下是一个简单的示例：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const CurrentTime = () => {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <View>
      <Text>{currentTime.toLocaleTimeString()}</Text>
    </View>
  );
};

export default CurrentTime;

倒计时功能

倒计时功能可以通过计算时间差来实现。以下是一个倒计时示例：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const Countdown = ({ targetDate }) => {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  function calculateTimeLeft() {
    const difference = new Date(targetDate) - new Date();
    let timeLeft = {};

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }

    return timeLeft;
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    return () => clearTimeout(timer);
  });

  return (
    <View>
      <Text>
        {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m {timeLeft.seconds}s
      </Text>
    </View>
  );
};

export default Countdown;

计时器功能

计时器功能可以通过记录开始时间和当前时间差来实现。以下是一个计时器示例：

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button } from 'react-native';

const Timer = () => {
  const [isRunning, setIsRunning] = useState(false);
  const [elapsedTime, setElapsedTime] = useState(0);
  const startTimeRef = useRef(0);
  const timerRef = useRef(null);

  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []);

  const startTimer = () => {
    if (!isRunning) {
      startTimeRef.current = Date.now() - elapsedTime;
      timerRef.current = setInterval(() => {
        setElapsedTime(Date.now() - startTimeRef.current);
      }, 10);
      setIsRunning(true);
    }
  };

  const stopTimer = () => {
    if (isRunning) {
      clearInterval(timerRef.current);
      setIsRunning(false);
    }
  };

  const resetTimer = () => {
    clearInterval(timerRef.current);
    setIsRunning(false);
    setElapsedTime(0);
  };

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60000);
    const seconds = Math.floor((time % 60000) / 1000);
    const milliseconds = Math.floor((time % 1000) / 10);

    return `${minutes.toString().padStart(2, '0')}:${seconds
      .toString()
      .padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
  };

  return (
    <View>
      <Text>{formatTime(elapsedTime)}</Text>
      <Button title="Start" onPress={startTimer} />
      <Button title="Stop" onPress={stopTimer} />
      <Button title="Reset" onPress={resetTimer} />
    </View>
  );
};

export default Timer;

使用第三方库

对于更复杂的时间处理，可以使用第三方库如 moment.js 或 date-fns。以下是使用 date-fns 的示例：

import React from 'react';
import { View, Text } from 'react-native';
import { format } from 'date-fns';

const FormattedTime = () => {
  const currentTime = new Date();

  return (
    <View>
      <Text>{format(currentTime, 'HH:mm:ss')}</Text>
    </View>
  );
};

export default FormattedTime;

时区处理

如果需要处理不同时区的时间，可以使用 moment-timezone 或 date-fns-tz。以下是使用 date-fns-tz 的示例：

import React from 'react';
import { View, Text } from 'react-native';
import { format } from 'date-fns';
import { utcToZonedTime } from 'date-fns-tz';

const TimeWithTimezone = () => {
  const date = new Date();
  const timeZone = 'America/New_York';
  const zonedDate = utcToZonedTime(date, timeZone);

  return (
    <View>
      <Text>{format(zonedDate, 'HH:mm:ss')}</Text>
    </View>
  );
};

export default TimeWithTimezone;

以上方法涵盖了 React Native 中常见的时间功能实现，可以根据具体需求选择合适的方式。