React Native中自定义i18next语言检测器失效问题排查

架构老林

2026-7-26

问题分析与修复方案

核心问题

你的代码存在两个关键错误，直接导致语言检测器的detect方法未被调用：

语法错误：自定义语言检测器的detect箭头函数缺少大括号，函数体无法被正确解析，i18next无法识别这个检测器方法。
初始化参数冲突：i18n.init里显式设置了lng: fallbackLanguage，这会强制使用回退语言，直接跳过语言检测器的逻辑。

修复步骤

给detect方法的箭头函数补上大括号，包裹try/catch代码块
移除i18n.init中的lng配置项（或设置为lng: undefined），让语言检测器生效

修正后的完整代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './languages/english.json';
import hi from './languages/hindi.json';
import kn from './languages/kannada.json';
import ta from './languages/tamil.json';
import AsyncStorage from '@react-native-async-storage/async-storage';

const resources = {
  en: en,
  hi: hi,
  kn: kn,
  ta: ta,
};

let fallbackLanguage = 'en';

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: async (callback) => {
    try {
      const language = await AsyncStorage.getItem('language');
      console.log('lllanguage', language);
      if (language) {
        console.log('Detected language:', language);
        callback(language);
      } else {
        console.log('No language detected, falling back to default language:', fallbackLanguage);
        callback(fallbackLanguage);
      }
    } catch (error) {
      console.error('Failed to get language from async storage:', error);
      callback(fallbackLanguage);
    }
  },
  fallbackLng: fallbackLanguage,
};


i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    resources,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;