反应本地多语言问题

Question

我有小反应本机应用程序，我正在尝试在更改语言时实现实时重新加载组件的多语言。

我正在使用React-Native-I18N库。我有我的语言组件，这是代码：

constructor(props) {
  super(props);
  this.state = { selected: 'sr_ME' };
}
async componentDidMount() {
  let currentLanguage = await this.getLocalKey('lang', 'sr_ME');
  this.setState({ selected: currentLanguage });
}
getLocalKey = async (key, defaultValue) => {
  try {
    let value = await AsyncStorage.getItem(key);
    return value != null ? value : defaultValue;
  } catch (e) {
    return defaultValue;
  }
}
storeLocalKey = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) { 
    // handle error if necessary...
  }
};
onValueChange(value) {
  I18n.locale = value; 
  this.setState({ selected: value }, () => this.storeLocalKey('lang', value));
  this.props.updateParentState({ 'lang': value });
}
...

我要在这样的另一个屏幕上导入的组件：

static navigationOptions = {
  header: null
};
state = {};
updateState(data) {
  I18n.locale = data.lang;
}
render() {
   return (
      <Container style={styles.container}>
        <Header style={styles.header}>
          <Left>
            <Text style={styles.headerTitle}>{I18n.t('home')}</Text>
          </Left>
          <Right>
            <LanguageButton updateParentState={this.updateState.bind(this)}/>
          </Right>
        </Header>
      </Container>);
    }

我正在尝试实现语言组件中的每一个语言变化都会更新语言环境并重新加载父级组件并将语言应用于其他组件。

目前，仅在导航标头中翻译标题，但内容保持不变。

有人知道如何解决这个问题吗？预先感谢您。

Answer 1

您可以将以下NPM反应本地定位用于多语言应用程序。您可以将多种语言定义到字符串JS文件中。

 // ES6 module syntax
import LocalizedStrings from 'react-native-localization';
let strings = new LocalizedStrings({
 en:{
   how:"How do you want your egg today?",
   boiledEgg:"Boiled egg",
  softBoiledEgg:"Soft-boiled egg",
   choice:"How to choose the egg"
 },
 it: {
   how:"Come vuoi il tuo uovo oggi?",
   boiledEgg:"Uovo sodo",
   softBoiledEgg:"Uovo alla coque",
   choice:"Come scegliere l'uovo"
 }
});

对于更改语言，您可以在要更改语言的代码表格上使用此功能强迫某种语言使用类似的东西：

 import RNRestart from 'react-native-restart';
_onSetLanguageToItalian() {
 strings.setLanguage('it');
  this.setState({});
RNRestart.Restart()
}

React-Native-NPM用于重新启动应用程序并反映整个应用程序的语言更改