反应本机多语言问题 [英] React native multi-language issue

问题描述

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

I have small react native app where I'm trying to implement multi-language that reload components in real time when I change language.

我正在使用react-native-i18n库。我有我的语言组件，这里是代码：

I'm using react-native-i18n library. I have my Language component and here is the code:

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 });
}
...

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

The component above I'm importing on another screen like this:

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>);
    }

我正在努力实现语言组件中语言的每次更改都会更新locale并重新加载父组件并将语言应用于其他组件。

I'm trying to achieve that every change of language in Language component updates the locale and reloads the parent component and apply language to other components too.

目前，这仅转换导航标题中的标题，但内容保持不变。

This, for now, only translates title in navigation header but content stay unchanged.

有谁知道如何解决这个问题？
提前谢谢。

Does anyone knows how to fix this? Thank you in advance.

推荐答案

您可以使用以下npm react-native-localization 用于多语言应用程序。您可以将多种语言定义为字符串js文件。

You can use following npm react-native-localization for multilingual application. You can define multiple language into string js file.

// ES6模块语法

// ES6 module syntax

从'react-native-localization'导入LocalizedStrings;

import LocalizedStrings from 'react-native-localization';

let strings = new LocalizedStrings（{

let strings = new LocalizedStrings({

EN：{

如何：你今天想要什么蛋？，

   how:"How do you want your egg today?",

boiledEgg：煮沸egg，

   boiledEgg:"Boiled egg",

softBoiledEgg：煮熟的鸡蛋，

  softBoiledEgg:"Soft-boiled egg",

选择：如何选择鸡蛋

}，

it：{

如何：来vuoi il tuo uovo oggi？，

   how:"Come vuoi il tuo uovo oggi?",

boiledEgg：Uovo sodo，

   boiledEgg:"Uovo sodo",

softBoiledEgg：Uovo alla coque，

   softBoiledEgg:"Uovo alla coque",

选择：来到scegliere l'uovo

   choice:"Come scegliere l'uovo"

}

}）;

对于更改语言，您可以在代码上使用此功能形式你想要改变语言的地方
强制使用这样的语言：

For change language you can use this function on you code form where you want to change language force a particular language use something like this:

从'react-native-restart导入RNRestart ';

import RNRestart from 'react-native-restart';

_onSetLanguageToItalian（）{

_onSetLanguageToItalian() {

strings.setLanguage（'it'）;

 strings.setLanguage('it');

this.setState（{}）;

  this.setState({});

RNRestart.Restart（）

RNRestart.Restart()

}

react-native-restart npm用于重启应用程序并将语言更改反映到整个应用程序

react-native-restart npm is use to restart app and reflect language change in to whole app

这篇关于反应本机多语言问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！