如何将i18next与Redux集成？语言检测方案遇阻求助

我来帮你搞定这个语言检测的问题！你想要的「优先用户历史选择，首次打开用设备语言」的逻辑，其实可以通过自定义i18next的语言检测流程来实现，比依赖第三方detector更灵活可控。下面是完整的解决方案：

第一步：安装必要依赖 #

首先确保你安装了这些包（注意AsyncStorage已经从react-native核心移到单独的包了）：

npm install i18next react-i18next @react-native-async-storage/async-storage react-native-localize
# 或者用yarn
yarn add i18next react-i18next @react-native-async-storage/async-storage react-native-localize

第二步：配置i18n.js文件 #

替换你原来的i18n.js，用自定义逻辑实现语言检测：

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getLocales } from 'react-native-localize';

// 你的翻译资源，根据实际情况替换
const resources = {
  en: {
    translation: {
      welcome: 'Welcome',
      // 更多英文翻译...
    }
  },
  zh: {
    translation: {
      welcome: '欢迎',
      // 更多中文翻译...
    }
  }
};

// 自定义语言检测函数：先读用户保存的设置，没有则取设备语言
const detectLanguage = async () => {
  // 1. 优先读取本地存储的用户选择
  const savedLanguage = await AsyncStorage.getItem('user_preferred_language');
  if (savedLanguage) {
    return savedLanguage;
  }

  // 2. 首次打开时，获取设备默认语言
  const deviceLocales = getLocales();
  // 提取语言代码（比如从'zh-CN'得到'zh'）
  const deviceLang = deviceLocales[0].languageCode;
  
  // 做个兜底：如果设备语言不在你的支持列表里，用默认语言
  return ['en', 'zh'].includes(deviceLang) ? deviceLang : 'en';
};

// 初始化i18n
const initI18n = async () => {
  const initialLanguage = await detectLanguage();
  await i18next
    .use(initReactI18next)
    .init({
      resources,
      lng: initialLanguage, // 初始化用检测到的语言
      fallbackLng: 'en', // 兜底语言
      interpolation: {
        escapeValue: false // React已经处理XSS，不需要额外转义
      }
    });
};

// 导出初始化函数和i18n实例
export { initI18n, i18next };

第三步：在App中初始化i18n #

在你的根组件（比如App.js）中，先完成i18n初始化再渲染页面：

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { initI18n } from './i18n';
import MainContent from './MainContent'; // 你的主内容组件

export default function App() {
  const [isI18nReady, setIsI18nReady] = useState(false);

  useEffect(() => {
    const setupLocalization = async () => {
      await initI18n();
      setIsI18nReady(true);
    };
    setupLocalization();
  }, []);

  // 初始化完成前可以显示加载状态
  if (!isI18nReady) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return <MainContent />;
}

第四步：添加语言切换功能 #

当用户手动切换语言时，记得把选择保存到本地存储：

// 比如在设置页面的切换按钮点击事件
const handleLanguageChange = async (newLang) => {
  // 保存到本地存储
  await AsyncStorage.setItem('user_preferred_language', newLang);
  // 更新i18n语言
  await i18next.changeLanguage(newLang);
};

为什么原来的detector没解决问题？ #

i18next-react-native-language-detector的默认检测顺序可能是「设备语言 > 本地存储」，或者需要额外配置优先级才能满足你的需求。自定义逻辑则完全按照你的需求来：优先用户历史选择，其次设备语言，逻辑清晰还容易调试。

内容的提问来源于stack exchange，提问作者b-asaf