React Native,如何在语言更改后更新视图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native,如何在语言更改后更新视图相关的知识,希望对你有一定的参考价值。

我想支持语言更改(由用户手动)。我正在使用react-native-i18n。我发现如何在运行时更改显示的语言,但我没有找到如何更新当前视图。

My Code

enter image description here

Environment

环境:

  • 节点:8.9.4
  • 纱线:1.3.2
  • npm:4.0.5

Expected Behavior

当我使用I18n.locale ='en';不在函数中时......就像它一样,文本将是英文,当我使用I18n.locale ='he';时,文本将是希伯来语。但是我需要在运行时更改语言。所以我希望当我点击每个按钮时,语言将会改变并显示。

Actual Behavior

什么都没发生..我假设我需要重新加载/重新渲染/更新视图,但我没有找到如何。

答案

你可以尝试这样的事情

<View style={styles.container}>
    <Button onPress={this.setLocale()} title={strings('test.b1')}> 
</View>

public setLocale() {
    this.setState({stateOfLocale: 'en'});
    I18n.locale = stateOfLocale;
}
另一答案

这里有一些建议,

  1. 当您的应用程序初始化时,您可以设置I18n.locale
      I18n.locale = 'en'
  1. 当您尝试更改语言时,请确保所有组件都具有i18n翻译,即。 i18.t()I18n.translate的功能如下所示:
  ...
  <TouchableOpacity>
    <View>
     <Text>{I18n.t('LANG.CHANGE')}</Text>
   </View>
  </TouchableOpacity>
  ...

你的en.json

  ...
  { 
    'LANG': {
       'CHANGE': "Change Language"
     }
  }
  ...
  1. 在语言变化时,即当您更改i18.locale时,您可以通知连接到store的所有组件,以便它们重新呈现,即典型的react-redux流。

希望这可以帮助。

以上是关于React Native,如何在语言更改后更新视图的主要内容,如果未能解决你的问题,请参考以下文章

React-native Sqlite,强制列表视图更新新数据

React Native:如何更改 onPress 事件的视图

React Native:在 Navigator Pop 上更改组件(文本)

状态更改后,上下文未更新 React Native 中的文本

代码更改后 React Native 0.63 不更新 main.jsbundle

React Native:状态更改后无法重新渲染图像