Блог

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

Но проблема в том, что когда я использовал redux connect для выполнения изменения состояния, это выдает мне много ошибок! Я искал библиотеку под названием react-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);
  

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

У вас возникнет много проблем, если вы попытаетесь установить исходный язык с помощью 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,
        },
    });