React Native时区切换日期显示异常修复及Moment转换方法

这个问题我之前在项目里也碰到过，核心原因是JavaScript对YYYY-MM-DD格式的日期字符串解析规则：当你直接用new Date("2017-01-12")时，JS会默认把这个字符串解析成UTC时区的午夜0点，而不是当前本地时区的午夜0点。

比如芝加哥时区（CST）是GMT-6，UTC的午夜0点往前推6小时就是前一天的18点，所以new Date("2017-01-12")在CST下会显示成2017-01-11T18:00:00-06:00，自然日期就变成前一天了。

原生JavaScript修复方案 #

有两种可靠的方法可以规避这个问题：

1. 拆分年月日构造本地日期 #

直接把字符串拆成年、月、日，用Date构造函数创建本地时区的日期（注意月份参数是从0开始的，所以要减1）：

const dateString = "2017-01-12";
const [year, month, day] = dateString.split("-").map(Number);
const localDate = new Date(year, month - 1, day);

这种方式不管当前时区是什么，都会创建本地时区的当天午夜0点，完全不会有时区偏移问题。

2. 给日期字符串添加时分秒后缀 #

根据ECMAScript标准，带时分秒的YYYY-MM-DDTHH:mm:ss格式字符串会被解析为本地时区的时间，所以给原字符串加上T00:00:00即可：

const localDate = new Date("2017-01-12T00:00:00");

这样JS会直接把它当作本地时区的午夜0点，解析结果就正确了。

Moment.js（及Moment-Timezone）替代方案 #

如果你的项目已经在用Moment，或者需要更灵活的时区处理，Moment会让这个问题变得更简单：

1. 基础本地时区解析 #

直接用Moment解析字符串，默认会按本地时区处理：

import moment from 'moment';
const localDate = moment("2017-01-12").toDate();

Moment内部会自动处理时区差异，返回对应本地时区的正确日期对象。

2. 指定特定时区解析 #

如果需要忽略用户本地时区，强制解析成某个时区的日期（比如不管用户在哪，都按芝加哥时区解析），可以用moment-timezone：

import moment from 'moment-timezone';
// 解析为芝加哥时区的2017-01-12
const cstDate = moment.tz("2017-01-12", "America/Chicago").toDate();
// 解析为印度标准时间的2017-01-12
const istDate = moment.tz("2017-01-12", "Asia/Kolkata").toDate();

这种方式适合多时区场景，能精准控制日期的时区归属。

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