Dayjs在React Native iOS模拟器与Web端时区转换表现不一致

函数代码 #

我使用以下parseGatheringDate函数将未来事件的墙钟时间转换为用户本地时区：

export const parseGatheringDate = (
  timeZone: string,
  gatheringData: {
    date: string;
    time: string;
    timeZone: string;
  }
) => {
  const eventDateTime = `${gatheringData.date}T${gatheringData.time}:00`;

  const gathering = dayjs.tz(eventDateTime, gatheringData.timeZone);

  const eventInLocalTime = gathering.tz(timeZone);

  const formattedEventTime = eventInLocalTime.format("YYYY-MM-DD HH:mm");

  return formattedEventTime;
};

测试结果对比 #

Web端正确输出 #

运行以下测试代码：

console.log(
      "DATE 1",
      parseGatheringDate("Europe/Belgrade", {
        date: "2024-08-21",
        time: "08:00",
        timeZone: "Europe/Belgrade",
      })
    );
    console.log(
      "DATE 2",
      parseGatheringDate("America/New_York", {
        date: "2024-08-21",
        time: "08:00",
        timeZone: "Europe/Belgrade",
      })
    );

得到正确结果：

2024-08-21 02:00
2024-08-21 08:00

React Native iOS模拟器错误输出 #

相同测试代码在iOS模拟器中运行，得到重复的错误值：

2024-08-21 06:44
2024-08-21 06:44

问题原因分析 #

1. 时区插件初始化不完整：React Native环境中，dayjs的时区插件（dayjs-plugin-tz）可能未按顺序加载UTC和时区插件，导致时区解析逻辑失效，直接 fallback到模拟器系统时区。
2. iOS引擎解析差异：iOS的JSC或Hermes引擎对时区字符串的识别逻辑与Web端V8引擎不同，无法正确解析Europe/Belgrade这类时区标识。
3. 时区数据缺失：dayjs时区插件依赖时区数据库，若未预加载完整数据，iOS环境下可能无法识别非本地时区。

解决方案 #

1. 规范初始化时区插件 #

在项目入口文件（如App.tsx或index.tsx）中按顺序引入并初始化插件：

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

// 必须先扩展UTC插件，再扩展时区插件
dayjs.extend(utc);
dayjs.extend(timezone);

2. 修改函数逻辑，通过UTC中转转换 #

避免直接跨时区转换，先转成UTC再切换到目标时区，降低解析歧义：

export const parseGatheringDate = (
  timeZone: string,
  gatheringData: {
    date: string;
    time: string;
    timeZone: string;
  }
) => {
  // 解析为事件所在时区的时间
  const eventInSourceTz = dayjs.tz(`${gatheringData.date}T${gatheringData.time}:00`, gatheringData.timeZone);
  // 转UTC后再切换到目标时区
  const eventInTargetTz = eventInSourceTz.utc().tz(timeZone);
  return eventInTargetTz.format("YYYY-MM-DD HH:mm");
};

3. 预加载完整时区数据 #

若上述方法无效，手动引入完整时区数据库：

// 在入口文件添加
import 'dayjs/timezone';

4. 排除模拟器系统时区干扰 #

打开iOS模拟器「设置」→「通用」→「日期与时间」，关闭「自动设置」，手动切换时区，验证结果是否变化。

5. 升级依赖版本 #

执行命令升级dayjs及插件到最新版本，修复已知兼容问题：

npm update dayjs dayjs-plugin-tz
# 或使用yarn
yarn upgrade dayjs dayjs-plugin-tz

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