在 React Native 中使用 Momentjs 计算预订结束前的剩余时间

Question

我有一组数据，我正在通过这些数据映射用户选择特定时间段来预订会议室的位置，我正在尝试获取此预订的 end_date 并计算出有多少 hours/minutes 在此预订结束前剩余。

我正在尝试使用 Momentjs 来执行此操作，并且想知道这样做的最佳方法是什么。

我的数据数组包含几个不同的预订，因此我在 UI 的不同卡片中映射并呈现 'Time Left'。

我的数组如下所示：

[
   {
     created_at: "2021-08-19T13:20:26.000000Z"
     end_date: "2021-08-19 17:59:50"
     id: 171
     key_id: "30654908"
   }
]

我的代码目前是这样的：

const ActiveSession = ({navigation}) => {
  const {bookings} = React.useContext(StateContext);

  console.log(bookings);

  let now = moment()
  console.log(now);

return (
    <>
      {bookings.map((booking, index) => (
        <View style={styles.subContainer} key={index}>
          <View style={styles.topbar}>
            <Image
              style={styles.tinyLogo}
              source={{uri: booking.pod.location.image}}
            />
            <View>
              <Text>
                <Text style={{fontWeight: 'bold'}}>{booking.pod.name}</Text>
              </Text>
              <Text>{`Time left - ${moment(booking.end_date).format('H:mm')}</Text>
            </View>
          </View>
       </>
     )
   }

如您所见，我的 end_date 时间格式正确，但不确定如何从中减去当前时间，尤其是超过一个小时时。

预订结束前可能只有几分钟或几个小时等。我知道这可能很容易，但我们将不胜感激！

提前致谢。

Answer 1

我不得不假设一些数据并使用 useState 能够每秒重新渲染屏幕，但这是一个工作示例。让我知道这是否是您要找的。

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

const formatTime = (duration) => {
  var hours = Math.floor(duration / 3600);
  var minutes = Math.floor((duration % 3600) / 60);
  var seconds = duration % 60;

  if (hours < 10) {
    hours = '0' + hours;
  }
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  if (seconds < 10) {
    seconds = '0' + seconds;
  }
  return hours + ':' + minutes + ':' + seconds;
};

const ActiveSession = ({ navigation }) => {
  // const { bookings } = React.useContext(StateContext);
  const [bookings, setBookings] = useState([
    {
      created_at: '2021-08-19T13:20:26.000000Z',
      end_date: '2021-08-19 17:59:50',
      id: 171,
      key_id: '30654908',
      timeLeft: moment('2021-08-19 17:59:50').diff(moment(), 'seconds'),
    },
    {
      created_at: '2021-08-19T15:20:26.000000Z',
      end_date: '2021-08-19 18:59:50',
      id: 172,
      key_id: '30654908',
      timeLeft: moment('2021-08-19 18:59:50').diff(moment(), 'seconds'),
    },
    {
      created_at: '2021-08-19T16:20:26.000000Z',
      end_date: '2021-08-19 19:59:50',
      id: 173,
      key_id: '30654908',
      timeLeft: moment('2021-08-19 19:59:50').diff(moment(), 'seconds'),
    },
  ]);

  useEffect(() => {
    const timer = setInterval(() => {
      const newBookings = bookings.map((booking) => {
        return {
          ...booking,
          timeLeft: moment(booking.end_date).diff(moment(), 'seconds'),
        };
      });
      setBookings(newBookings);
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, [bookings]);

  return (
    <>
      {bookings.map((booking, index) => (
        <View style={styles.subContainer} key={index}>
          <View style={styles.topbar}>
            {/* <Image
              style={styles.tinyLogo}
              source={{ uri: booking.pod.location.image }}
            /> */}
            <View>
              <Text>
                {/* <Text style={{fontWeight: 'bold'}}>{booking.pod.name}</Text> */}
                <Text style={{ fontWeight: 'bold' }}>{booking.id}</Text>
              </Text>
              <Text>{`Time left - ${moment(booking.end_date).format(
                'H:mm'
              )} ${formatTime(booking.timeLeft)}`}</Text>
            </View>
          </View>
        </View>
      ))}
    </>
  );
};

const styles = StyleSheet.create({});

export default ActiveSession;

在 React Native 中使用 Momentjs 计算预订结束前的剩余时间

Calculate time remaining before a booking ends with Momentjs in React Native

javascript

datetime

momentjs

reactjs

react-native