React Native中toLocaleTimeString无法转换为12小时制问题求助

在React Native/Expo环境下，调用toLocaleTimeString("en-US", {hour12: true})无法切换到12小时制，但相同代码在React Web中正常运行，核心原因是React Native的JS引擎（Hermes或JSC）对ECMAScript国际化API（Intl）的支持存在局限性，部分配置参数会被忽略。

以下是两种可行的解决方式：

手动格式化时间（无需额外依赖） #

自己实现时间格式化逻辑，完全不依赖引擎的国际化支持，确保结果符合预期：

// 自定义12小时制格式化函数
const formatTo12Hour = (date) => {
  let hours = date.getHours();
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  // 转换12小时制逻辑
  hours = hours % 12;
  hours = hours === 0 ? 12 : hours; // 将0点转为12
  
  // 返回不带时段的格式（如01:12:18），需要时段可拼接` ${hours >= 12 ? 'PM' : 'AM'}`
  return `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`;
};

// 在Text组件中使用
<Text>{formatTo12Hour(liveTime)}</Text>

借助第三方库适配多场景（适合多语言/时区需求） #

如果需要支持多地区、多时区的时间格式化，可使用react-native-localize配合date-fns（轻量且维护活跃）：

1. 安装依赖

npm install date-fns react-native-localize
# 或使用yarn
yarn add date-fns react-native-localize

2. 代码实现

import { format } from 'date-fns';
import { getLocales, getTimeZone } from 'react-native-localize';

// 获取当前设备的地区标识
const currentLocale = getLocales()[0].languageTag;
// 导入对应地区的date-fns语言包
const locale = require(`date-fns/locale/${currentLocale}`);

// 格式化时间为12小时制的时分秒
const formattedTime = format(liveTime, 'hh:mm:ss', {
  locale,
  timeZone: getTimeZone()
});

// 在Text组件中渲染
<Text>{formattedTime}</Text>

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