将 i18next 与 redux 集成

Question

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

我试过使用这个 guide and this bit of code 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 它工作正常但不是我想要的 - 总是采用设备区域设置

Answer 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;

将 i18next 与 redux 集成

integrate i18next with redux

react-native

i18next