如何为React Native的TimeAgo组件配置时区以适配本地时间？

这问题我之前帮朋友排查过类似的，核心就是时间格式和时区识别的配合问题，咱们一步步来搞定：

1. 先确保服务器返回的时间带时区标记 #

Laravel默认把created_at存成UTC时间到MySQL是没问题的，但返回给前端的时候，一定要返回带UTC时区标记的ISO 8601格式字符串，比如2024-05-20T12:30:00Z（末尾的Z就是UTC的标识）。如果返回的是不带时区的字符串，前端组件会误以为是本地时区时间，自然会算错。

你可以在Laravel的Message模型里修改created_at的返回逻辑：

// app/Models/Message.php
use Illuminate\Database\Eloquent\Casts\Attribute;
use Carbon\Carbon;

class Message extends Model
{
    protected function createdAt(): Attribute
    {
        return Attribute::make(
            get: fn ($value) => Carbon::parse($value)->toIso8601String(),
        );
    }
}

2. 检查TimeAgo组件的配置和传值 #

大部分TimeAgo类组件（不管是原生JS的timeago.js，还是Vue/React的封装组件）都能自动识别客户端时区，但前提是你传入的是带时区标记的时间。

举个原生JS的例子：

import timeago from 'timeago.js';

// 传入带Z标记的UTC时间，组件会自动用浏览器时区计算相对时间
const timeEl = document.querySelector('.message-time');
timeago().render(timeEl, '2024-05-20T12:30:00Z');

如果你用的是框架封装的组件，比如Vue的vue-timeago，别手动设置固定时区，让它自动读取客户端时区即可。如果之前有强制设置UTC时区的配置，记得删掉。

3. 验证客户端时区是否正常读取 #

可以在浏览器控制台敲一行代码确认：new Date().getTimezoneOffset()。埃及时区是UTC+2，这个值应该返回-120（因为它代表当前时区与UTC的分钟差，UTC+2比UTC早120分钟，所以是负数）。如果这个值不对，那可能设备时区真的有问题，但你说模拟器设置正确，这一步大概率是没问题的。

4. 多时区支持的通用方案 #

要让全球用户都能看到正确的相对时间，记住三个核心原则：

• 服务器始终以UTC存储时间（你已经做到了）
• 接口返回带UTC标记的标准ISO时间
• 前端要么自动读取用户设备时区，要么允许用户手动选择时区，用这个时区来转换计算相对时间

如果需要支持手动切换时区，可以用date-fns-tz或者moment-timezone来处理，比如：

import { formatRelative } from 'date-fns';
import { utcToZonedTime } from 'date-fns-tz';

// 服务器返回的UTC时间
const utcMessageTime = new Date('2024-05-20T12:30:00Z');
// 用户选择的时区（比如从浏览器获取或用户设置）
const userTimezone = 'Africa/Cairo';
// 把UTC时间转成用户时区的时间
const localTime = utcToZonedTime(utcMessageTime, userTimezone);
// 计算相对时间
const relativeTime = formatRelative(localTime, new Date());
console.log(relativeTime); // 刚发的消息会显示"刚刚"

按这个流程走，应该就能解决刚发的消息显示"2小时前"的问题了，而且天然支持多时区用户~

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