反应原生多语言问题

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 react-native-localization 进行多语言应用程序。可以在一个字符串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-restartnpm 用于重启应用并将语言变化反映到整个应用中