如何在 React Native Expo 应用程序中集成 i18n-js

Question

我在 Expo 应用程序中实例化 I18n 时遇到问题。问题的 TL;DR 是需要翻译的组件在

Expo.Util.getLocaleAsync()

返回并设置语言环境。我不知道如何最好地设置它。到目前为止，我有一个 I18n 实例的文件，然后我将其导入并在我的应用程序中的其他任何地方使用。它看起来像这样：

import Expo from 'expo';
import I18n from 'i18n-js';
import english from './resources/strings/en';
import danish from './resources/strings/da';

I18n.defaultLocale = 'en-GB';
I18n.fallbacks = true;

I18n.initAsync = async () => {
  var locale = 'en-GB';
  try {
    locale = await Expo.Util.getCurrentLocaleAsync();
  } catch (error) {
    console.log('Error getting locale: ' + error);
  }

  I18n.locale = locale ? locale.replace(/_/, '-') : '';
};

I18n.translations = {
  en: english,
  da: danish,
};

export default I18n;

然后，在我的根应用程序组件中，我执行以下操作：

从 './src/i18n' 导入 I18n；

class App extends React.Component {
  async componentWillMount() {
    console.log('Current locale (main1): ' + I18n.currentLocale());
    try {
      await I18n.initAsync();
    } catch (error) {
      console.log('Error setting locale ' + error);
    }

    console.log('Current locale (main2): ' + I18n.currentLocale());
  }

  render() {
    return <AppContainer />;
  }
}

Expo.registerRootComponent(App);

日志说明了预期值 - 首先是默认语言环境，然后是 main2 中更新的语言环境。问题是在更改之前使用第一个语言环境呈现子视图，我不明白为什么？

我想不出更好的方法来做到这一点，任何想法/提示将不胜感激:-)

Answer 1

这可能是适合您的解决方案：https ://github.com/xcarpentier/ex-react-native-i18n