在 React Native App 中将语言更改为用户偏好

IT技术 javascript reactjs react-native react-redux react-native-ios
2021-05-03 13:48:17

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

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

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

谢谢!

1个回答

我已经研究过一个可能这个想法可以帮助你的情况。

我使用react-native-i18nhttps://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;

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

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

希望能帮助到你