React Native安卓模拟器中Date的toLocaleString输出格式异常如何解决

问题根因 #

React Native 安卓端默认搭载的 Hermes 引擎在 0.70 之前的版本，没有完整实现toLocaleString的国际化格式化能力，即使传入区域和格式参数也会被忽略，只会输出固定的原始日期格式。如果是使用JSC引擎的旧项目，也会存在安卓系统内置ICU国际化数据不全导致参数不生效的问题。

可行解决方案 #

方案1：升级Hermes引擎版本 #

如果你当前使用的React Native版本低于0.70，升级到0.70及以上版本，该版本起Hermes已完整支持ECMA-402国际化规范，toLocaleString的入参可以正常生效。升级后以下代码即可得到预期输出：

const dateStr = new Date().toLocaleString('en-US', {
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  hour12: true
}).replace('AM', 'am').replace('PM', 'pm').replace(/\s/g, '');
// 输出格式示例：Oct17202109:57pm

注：部分定制安卓系统即使指定en-US区域也可能返回中文上/下午标识，可新增字符串替换逻辑统一格式

方案2：使用第三方日期处理库（兼容全版本） #

如果暂时无法升级RN版本，直接使用date-fns或者dayjs这类轻量日期库，完全规避引擎兼容问题，以dayjs为例：

1. 首先安装依赖：

npm install dayjs
# 或者
yarn add dayjs

2. 代码中直接调用格式化方法即可：

import dayjs from 'dayjs';
import 'dayjs/locale/en';

dayjs.locale('en');
const dateStr = dayjs(date_obj).format('MMM DD YYYY hh:mma');
// 直接输出预期格式：Oct 17 2021 09:57pm

这种方案兼容性最好，不受RN版本和引擎差异影响，也不需要额外处理系统返回的格式差异。

方案3：手动拼接日期字符串（临时应急） #

如果不想引入额外依赖，也可以直接通过原生Date方法获取各字段手动拼接：

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const d = date_obj;
const month = months[d.getMonth()];
const day = String(d.getDate()).padStart(2, '0');
const year = d.getFullYear();
let hour = d.getHours();
const minute = String(d.getMinutes()).padStart(2, '0');
const ampm = hour >= 12 ? 'pm' : 'am';
hour = hour % 12 || 12;
const dateStr = `${month} ${day} ${year} ${hour}:${minute}${ampm}`;

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