将 i18next 与 redux 集成答案

【问题标题】：integrate i18next with redux将 i18next 与 redux 集成
【发布时间】：2018-06-12 19:24:48
【问题描述】：

我正在尝试从以下两个选项之一中检测语言环境： 1. 如果用户选择了一个 - 应用程序至少打开了一次 2. 如果应用程序是第一次打开 - 使用设备区域设置。

我尝试使用这个guide 和这段代码i18next-react-native-language-detector。但没有帮助。我的 i18n.js 文件如下所示：

import i18next from 'i18next';
import { AsyncStorage } from 'react-native';
(*) // import i18nextReactNative from 'i18next-react-native-language-detector';  
import locale from 'react-native-locale-detector';
import en from './en';
import de from './de';

const languageDetector = {
    init: Function.prototype,
    type: 'languageDetector',
    async: true, // flags below detection to be async
    detect: () => AsyncStorage.getItem('APP:lnag')
      .then((savedDataJSON) => {
        const savedLocal = JSON.parse(savedDataJSON);
        const selectLanguage = savedLocal || locale;
        return selectLanguage;
    }),
    cacheUserLanguage: Function.prototype,
};

let translate;
i18next
    (*)//.use(i18nextReactNative)
    (**).use(languageDetector)
    .init({
        fallbackLng: 'en',
        resources: {
            en,
            de,
        },
        react: {
            wait: true,
        },
        // have a common namespace used around the full app
        ns: ['common'],
        defaultNS: 'common',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format) {
                if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
        },
    }, (err, t) => {
        translate = t;
    });
export { translate as t };
export default i18next;

但我收到一个错误：TypeError: (0, _18n.t) is not a function。

当我使用默认 languageDetector 时，从行 (*) 中删除注释并注释自定义 languageDetector 它工作正常，但不是我想要的 - 始终采用设备语言环境

【问题讨论】：

标签： react-native i18next

【解决方案1】：

我找到了解决办法：

import i18next from 'i18next';
import { AsyncStorage } from 'react-native';
import locale from 'react-native-locale-detector';
import en from './en';
import de from './de';

const languageDetector = {
    init: Function.prototype,
    type: 'languageDetector',
    async: true, // flags below detection to be async
    detect: async (callback) => {
        const savedDataJSON = await AsyncStorage.getItem(STORAGE_KEY);
        const lng = (savedDataJSON) ? JSON.parse(savedDataJSON): null;
        const selectLanguage = lng || locale;
        console.log('detect - selectLanguage:', selectLanguage);
        callback(selectLanguage);
    },
    cacheUserLanguage: () => {}
}

let translate;
i18next
    .use(languageDetector)
    .init({
        fallbackLng: 'en',
        resources: { en, de},
        react: { wait: false },
        // have a common namespace used around the full app
        ns: ['common'],
        defaultNS: 'common',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format) {
            if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
       },
    }, (err, t) => {
        translate = t;
});
export { translate as t };
export default i18next;

【讨论】：