如何基于React Native Expo应用内i18n切换DateTimePicker语言？

能否通过i18n根据React Native Expo应用内选择的语言切换DateTimePicker日历的语言？目前仅修改设备语言时该组件语言才会变化，应用内切换语言无效果，但i18n在应用其他部分运行正常。使用的库为react-native-datetimepicker。

代码示例：

export function DateTimePicker() {
  const [isPickerShow, setIsPickerShow] = React.useState(false);

  const showPicker = () => {
      setIsPickerShow(true);
  };

  const { i18n } = useTranslation();
  return (
      <Pressable
          onPress={showPicker}
      >
          <View>
          {isPickerShow && (
              <DateTimePicker
                  mode="date"
                  display="default"
                  locale={i18n.language}  // 设置locale但无效果
              />
           </View>
          )}
      </Pressable>
  );
}

1. 问题根源 #

react-native-datetimepicker的display="default"模式会调用系统原生日历组件，这类组件的语言完全依赖系统语言设置，不会响应组件的locale属性。而应用内切换语言属于应用级别的设置，无法影响系统原生组件的语言。

2. 核心解决步骤 #

• 切换display模式：改用纯JS实现的模式（如spinner、iOS的calendar、Android的clock），这类模式会读取组件的locale属性来渲染语言。
• 确保locale格式正确：组件需要符合平台规范的区域码（如iOS用zh-Hans，Android用zh-CN，英文用en-US），而i18n返回的可能是简化码（如zh），需要适配转换。
• 监听语言变化触发重渲染：当应用内语言切换时，更新locale状态，强制组件重新渲染。

修改后的代码示例 #

import React, { useState, useEffect } from 'react';
import { Pressable, View, Platform } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { useTranslation } from 'react-i18next';

export function CustomDateTimePicker() {
  const [isPickerShow, setIsPickerShow] = useState(false);
  const [currentLocale, setCurrentLocale] = useState('');
  const { i18n } = useTranslation();

  useEffect(() => {
    // 根据平台适配locale格式
    const formattedLocale = Platform.select({
      ios: i18n.language === 'zh' ? 'zh-Hans' : i18n.language,
      android: i18n.language === 'zh' ? 'zh-CN' : i18n.language,
      default: i18n.language
    });
    setCurrentLocale(formattedLocale);
  }, [i18n.language]);

  const showPicker = () => {
    setIsPickerShow(true);
  };

  return (
    <Pressable onPress={showPicker}>
      <View>
        {isPickerShow && (
          <DateTimePicker
            mode="date"
            display="spinner" // 改用纯JS实现的spinner模式
            locale={currentLocale}
            onCancel={() => setIsPickerShow(false)}
            onChange={(event, date) => {
              // 处理日期选择逻辑
              setIsPickerShow(false);
            }}
          />
        )}
      </View>
    </Pressable>
  );
}

额外说明 #

• 若需要iOS的日历样式，可以将display设为calendar，该模式也是JS实现，支持locale切换。
• Android上display="clock"模式同样支持locale属性，适合时间选择场景。
• 测试时确保应用内切换语言后，i18n.language确实更新为目标语言码，否则需要检查i18n的切换逻辑是否正确。

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