Question

我已在IAC Native中使用I18n.js库来根据I18n.js文件中选择的defaultLocale成功更改语言。

但是，问题是当我使用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);

如何执行此切换？请帮助

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,
        },
    });

如何将redux与I18n文件连接以根据redux状态切换语言？

1 个答案: