React Native待办应用添加任务时如何添加时间（类似Facebook消息发送时间）

一、时间格式化逻辑（匹配Facebook消息时间规则） #

Facebook的时间显示逻辑会根据时间差动态切换展示内容，以下是对应的JavaScript实现：

const formatTaskTime = (timestamp) => {
  const now = new Date();
  const taskDate = new Date(timestamp);
  const diffMs = now.getTime() - taskDate.getTime();
  const diffMins = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  // 1分钟内显示"刚刚"
  if (diffMins < 1) return '刚刚';
  // 1小时内显示"X分钟前"
  if (diffHours < 1) return `${diffMins}分钟前`;
  
  const isSameDay = now.getDate() === taskDate.getDate() &&
                    now.getMonth() === taskDate.getMonth() &&
                    now.getFullYear() === taskDate.getFullYear();
  // 当天内显示时分
  if (isSameDay) {
    return taskDate.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
  }
  
  // 昨天显示"昨天 时分"
  if (diffDays === 1) {
    return `昨天 ${taskDate.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
  }
  
  const isSameYear = now.getFullYear() === taskDate.getFullYear();
  // 同一年显示月日
  if (isSameYear) {
    return taskDate.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
  }
  // 跨年份显示年月日
  return taskDate.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
};

二、实现类Facebook的时间样式 #

Facebook消息时间的视觉特征是小字号、浅灰色、靠右对齐，用React Native的StyleSheet定义如下：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  taskTime: {
    fontSize: 12,
    color: '#8e8e93', // 匹配Facebook的浅灰色文本
    marginTop: 4,
    alignSelf: 'flex-end', // 靠右对齐，模拟消息气泡的时间位置
  },
  // 任务项容器样式补充
  taskItem: {
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
    flexDirection: 'column',
  },
  taskContent: {
    fontSize: 16,
    color: '#1c1c1e',
  },
});

三、整合到添加任务流程 #

1. 添加任务时记录时间戳：在创建新任务时，保存当前时间的ISO格式字符串：

const addTask = (taskContent) => {
  const newTask = {
    id: Date.now().toString(),
    content: taskContent,
    createdAt: new Date().toISOString(), // 保存时间戳
    completed: false,
  };
  setTasks(prevTasks => [...prevTasks, newTask]);
};

2. 渲染任务时展示格式化时间：在任务项组件中调用格式化函数并应用样式：

import { TouchableOpacity, Text } from 'react-native';

const TaskItem = ({ task }) => {
  return (
    <TouchableOpacity style={styles.taskItem}>
      <Text style={styles.taskContent}>{task.content}</Text>
      <Text style={styles.taskTime}>{formatTaskTime(task.createdAt)}</Text>
    </TouchableOpacity>
  );
};

四、可选优化 #

• 适配多地区时间格式：可以使用react-native-localize库获取用户地区设置，动态调整时间的12/24小时制显示
• 实时更新时间：如果需要让“刚刚”自动变为“1分钟前”这类动态更新，可设置定时任务（如每分钟）刷新时间显示，但注意控制重渲染频率避免性能问题
• 工具类抽离：将时间格式化函数放到单独的utils/time.js文件中，方便项目多处复用

内容的提问来源于stack exchange，提问作者taict