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.

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

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.

回答1:

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

// 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"

}

});

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:

import RNRestart from 'react-native-restart';

_onSetLanguageToItalian() {

strings.setLanguage('it');

this.setState({});

RNRestart.Restart()

}

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

来源：https://stackoverflow.com/questions/55071189/react-native-multi-language-issue

标签

javascript

react-native

internationalization

multilingual