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

Posted 2021-05-04

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

My Code

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'

2. 当您尝试更改语言时，请确保所有组件都具有i18n翻译，即。 i18.t()即I18n.translate的功能如下所示：

  ...
  <TouchableOpacity>
    <View>
     <Text>{I18n.t('LANG.CHANGE')}</Text>
   </View>
  </TouchableOpacity>
  ...

你的en.json

  ...
  { 
    'LANG': {
       'CHANGE': "Change Language"
     }
  }
  ...

3. 在语言变化时，即当您更改i18.locale时，您可以通知连接到store的所有组件，以便它们重新呈现，即典型的react-redux流。

希望这可以帮助。