Как связать приставку с файлом I18n для переключения языка в соответствии с состоянием притока?

Question

Я использовал библиотеку I18n.js в реагировать на родной язык, чтобы успешно изменить язык в соответствии с defaultLocale, выбранным в файле I18n.js.

Но проблема в том, что когда я использовал резервное соединение для изменения состояния, это дает мне много ошибок! Я искал библиотеку под названием Reaction-redux-i18n, но есть ли способ решить эту проблему без использования дополнительных библиотек?

Мой файл I18n.js:

  import I18n from "i18n-js";
  import en from "./locales/en";
  import tm from "./locales/tm";

  import { connect } from 'react-redux';

  I18n.fallbacks = true;
  I18n.defaultLocale = this.props.selectedLang === "English" ? 'en' :'tm';
  I18n.locale = this.props.selectedLang === "English" ? 'en' : 'tm';
  I18n.translations = {
    en,
    tm
  };

  const mapStateToProps = (state) => {
    return {
      selectedLang: state.auth.selectedLanguage
     }
   }

   export default connect(mapStateToProps)(I18n);

Как выполнить этот переключатель? Пожалуйста, помогите

Answer 1

У вас будет много проблем, если вы попытаетесь установить исходный язык с помощью redux. Я рекомендую вам использовать AsyncStorage.

При переключении языка - сохранить выбранный язык и обновить i18n:

handleChangeLanguage = async (lang) => {
    await AsyncStorage.setItem('lang', lang);

    const { i18n } = this.props;
    i18n.changeLanguage(lang);
}

При начальной загрузке приложения, проверьте AsyncStorage для предпочтительного языка:

 import i18n from 'i18next';
 import { AsyncStorage } from 'react-native';
 ....

 const languageDetector = {
    type: 'languageDetector',
    async: true,
    detect: async (cb) => {
        // Case 1: The user chose his preferred language setting.
        const preferredLang = await AsyncStorage.getItem('lang');
        if (preferredLang) {
            return cb(preferredLang);
        }

        // Case 2: return the default language
        return cb('en');
    },
    init: () => {},
    cacheUserLanguage: () => {},
};

i18n
    .use(languageDetector)
    .init({
        fallbackLng: 'en',
        react: {
            wait: true,
        },
    });