React Native中new Date触发Date value out of bound exception问题求助

React Native默认使用Hermes引擎，它对非ISO标准的日期字符串（比如"04 nov 22"）解析规则比Chrome的V8引擎更严格，直接用new Date(selectedDate)会抛出"Date value out of bound"异常，而V8会尝试容错解析，导致了环境间的差异。

以下是两种适配React Native的解决方案：

方案1：手动解析日期字符串 #

自己处理"dd mmm yy"格式的字符串，避免依赖JS引擎的解析逻辑，兼容性更强。修改后的代码如下：

useEffect(() => {
    if (selectedDate) {
      // 映射月份缩写到数字（注意月份从0开始）
      const monthMap = {
        jan: 0, feb: 1, mar: 2, apr: 3, may: 4, jun: 5,
        jul: 6, aug: 7, sep: 8, oct: 9, nov: 10, dec: 11
      };
      // 拆分日期字符串并统一转小写
      const [day, monthAbbr, year] = selectedDate.toLowerCase().split(' ');
      const month = monthMap[monthAbbr];
      // 将两位年份转为四位（假设是20xx年）
      const fullYear = parseInt(year, 10) + 2000;
      // 构造标准Date对象
      const date = new Date(fullYear, month, parseInt(day, 10));
      
      // 生成"YYYY-MM-DD"格式的字符串（两种方式任选其一）
      // 方式1：沿用原逻辑处理时区偏移
      let dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
        .toISOString()
        .split("T")[0];
      // 方式2：直接拼接字符串，更高效直观
      // let dateString = `${fullYear}-${String(month + 1).padStart(2, '0')}-${day.padStart(2, '0')}`;

      console.log(dateString);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDate]);

方案2：使用日期处理库（推荐） #

如果需要处理多种日期格式，或者不想手动维护解析逻辑，使用成熟的日期库比如date-fns可以简化代码，同时保证跨环境兼容性：

1. 安装依赖：

npm install date-fns

2. 修改后的代码：

import { parse } from 'date-fns';

useEffect(() => {
    if (selectedDate) {
      // 使用date-fns的parse函数解析指定格式的日期
      const date = parse(selectedDate, 'dd MMM yy', new Date());
      // 生成目标格式字符串
      let dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
        .toISOString()
        .split("T")[0];
      console.log(dateString);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDate]);

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