在 React Native App 中将语言更改为用户首选项答案

【问题标题】：Change Language as a user preferance in React Native App在 React Native App 中将语言更改为用户首选项
【发布时间】：2017-09-29 16:25:07
【问题描述】：

我正在使用 React Native 创建一个应用程序，并且需要能够“即时”更改应用程序的语言。我在这里遵循了示例：https://github.com/appfoundry/react-native-multi-language-sample。完成此操作后，我已成功设置 Redux 和所有随附的库。

我遇到的问题是我试图从警报弹出窗口而不是选择器触发我的操作，并且我在实际调度操作时遇到了问题。

如果有人能告诉我如何使用警报更改用户语言，那就太好了。

谢谢！

【问题讨论】：

标签： javascript reactjs react-native react-redux react-native-ios

【解决方案1】：

我处理过一个情况，也许这个想法可以帮助你。

我使用了react-native-i18n (https://github.com/AlexanderZaytsev/react-native-i18n) 并创建了一个包含我所有翻译的文件。像这样的：

I18n.translations = {
  en: {
    helloWorld: 'Hello World!',
    loginButton: 'Login',
  }
}

然后我将它导入到我的组件中，其中包含应该翻译的文本并像这样使用它：

<View>
  <Text>{I18n.t('helloWorld'}</Text>
</View>

我将用户语言存储在我的数据库中，当用户登录我的应用程序时，我会在我的减速器中获取并设置它。起初我从I18n.currentLocale() 方法中得到了语言。

在我的组件中，我从减速器获取用户语言并将其设置在 I18n 配置中： I18n.locale = this.props.language;

在这个组件中，我有一个选择器，因此用户可以选择它的语言。我触发了一个更新我的数据库以及reducer 的操作，并使用componentWillReceiveProps() 生命周期来更新I18n.locale 值

componentWillReceiveProps(nextProps) {
    I18n.locale = nextProps.language;
  }

希望对你有帮助

【讨论】：