安卓端react-calendar组件无法切换为zh-CN中文问题咨询

核心原因 #

你遇到的问题是react-calendar的国际化实现依赖独立的日期翻译资源，和系统原生Intl API支持无关，安卓端webview的资源加载、locale解析逻辑和PC端存在差异，具体触发原因通常为以下3种：

• 未主动导入react-calendar依赖的date-fns中文locale资源，仅传locale字符串不会自动加载对应的翻译文件
• 自定义formatDay函数未主动传入locale参数做日期格式化，默认调用的Date.toString()方法在安卓webview下强制返回英文格式
• 部分安卓webview对短locale码zh的适配存在兼容问题，和组件要求的标准locale码不匹配

修复步骤 #

1. 安装依赖的locale资源包
   react-calendar 3.0及以上版本依赖date-fns做日期国际化，首先安装对应包：

npm install @date-fns/locale

2. 导入中文locale并传入组件
   不要仅给locale属性传字符串，直接传入导入的locale对象兼容性最高：

import Calendar from 'react-calendar';
import zhCN from '@date-fns/locale/zh-CN';
import 'react-calendar/dist/Calendar.css';

// 组件调用
<Calendar 
  locale={zhCN}
/>

3. 修复自定义formatDay逻辑
   如果有自定义formatDay函数，必须主动传入locale做格式化，不要直接返回date对象的默认字符串：

import { format } from 'date-fns';

const formatDay = (_, date) => {
  return format(date, 'yyyy年MM月dd日', { locale: zhCN });
}

// 传入组件
<Calendar 
  locale={zhCN}
  formatDay={formatDay}
/>

4. 旧版本兼容处理
   如果你用的是2.x版本的react-calendar，额外配置全局默认locale：

import { setDefaultLocale } from 'react-calendar';
setDefaultLocale('zh-CN');

验证要点 #

• 安卓端首屏加载后打印导入的zhCN对象，确认不是undefined，避免分包异步加载导致资源未加载完成就渲染组件
• 不要混用字符串locale和导入的locale对象，统一用导入的对象可以规避90%以上的端侧兼容问题

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