Question

我正在尝试从以下两个选项之一检测区域设置： 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它工作正常但不是我想要的 - 总是需要设备区域设置

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集成

1 个答案: