如何使用i18next/react-i18next获取当前locale并适配React Native设备系统语言

问题根因 #

• 自定义的语言检测器languageDetector的detect方法直接硬编码返回了en，没有读取设备系统的实际语言设置
• 现有配置的资源语言、切换逻辑里的语言编码和你需要的英语/法语不匹配，存在编码不一致的问题
• 没有引入React Native端的系统语言读取能力

解决方案 #

第一步：安装系统语言读取依赖 #

安装react-native-localize来获取设备系统locale信息：

npm install react-native-localize
# 用yarn的话执行：yarn add react-native-localize
# iOS端老版本RN需要额外执行：cd ios && pod install

第二步：修改i18n配置文件 #

替换原有翻译配置内容，适配自动读系统语言的需求：

import i18next from 'i18next';
import {initReactI18next} from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

// 定义你支持的语言列表
const supportedLangs = ['en', 'fr'];
// 匹配系统最优语言
const getSystemLang = () => {
  const systemLocales = RNLocalize.getLocales();
  return systemLocales.find(locale => supportedLangs.includes(locale.languageCode))?.languageCode || 'en';
};

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: cb => cb(getSystemLang()), // 替换硬编码的en，读取系统匹配语言
  init: () => {},
  cacheUserLanguage: () => {},
};

i18next
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    resources: {
      en: {
        translation: {
          hello: 'Hello world',
          change: 'Change language',
        },
      },
      fr: { // 替换原错误的sv编码为法语编码fr
        translation: {
          hello: 'Bonjour le monde',
          change: 'Changer de langue',
        },
      },
    },
  });

export default i18next;

第三步：修改App.js的手动切换逻辑 #

把原逻辑里错误的nl编码替换为法语的fr：

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { useTranslation } from 'react-i18next';
import './src/Traslations'


export default function App() {
  const { t, i18n } = useTranslation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('hello')}</Text>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('change')}</Text>

      <TouchableOpacity style={{backgroundColor: 'pink'}} onPress={() => i18n.changeLanguage(i18n.language === 'fr' ? 'en' : 'fr')}>
        <Text>{t('change')}</Text>
      </TouchableOpacity>
    </View>
  );
}

可选优化：监听系统语言实时变化 #

如果需要用户切后台修改系统语言后，切回应用自动同步语言，可以在i18n配置文件里添加监听逻辑：

RNLocalize.addEventListener('change', () => {
  const newLang = getSystemLang();
  if (i18next.language !== newLang) {
    i18next.changeLanguage(newLang);
  }
});

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