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

问题描述 投票:2回答:2

我想支持语言更改(由用户手动)。我正在使用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

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

reactjs react-native view internationalization updates
2个回答
2
投票

你可以尝试这样的事情

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

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

1
投票

这里有一些建议,

  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流。

希望这可以帮助。

© www.soinside.com 2019 - 2024. All rights reserved.