Реагировать на проблему родного языка - PullRequest
Новая
       43

Реагировать на проблему родного языка

0 голосов
/ 09 марта 2019

У меня небольшое встроенное приложение, в котором я пытаюсь реализовать многоязыковой интерфейс, который перезагружает компоненты в режиме реального времени при смене языка.

Я использую библиотеку реактив-native-i18n. У меня есть компонент Language, и вот код: 

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

Я пытаюсь добиться того, чтобы каждое изменение языка в компоненте Language обновляло локаль и перезагружало родительский компонент, а также применял язык к другим компонентам.

На данный момент это только переводит заголовок в заголовке навигации, но содержимое остается неизменным.

Кто-нибудь знает, как это исправить? Заранее спасибо.

1 Ответ

0 голосов
/ 10 марта 2019

Вы можете использовать следующие npm response-native-localization для многоязычного применения. Вы можете определить несколько языков в строковом файле js.

// ES6 синтаксис модуля

импорт LocalizedStrings из 'реагируют-нативный локализацию';

пусть строки = новые LocalizedStrings ({

ен: {

как: «Как вы хотите, чтобы ваши яйца сегодня»,

boiledEgg: "Вареное яйцо",

softBoiledEgg: "всмятку яйцо",

выбор: "Как выбрать яйцо"

* *} Тысяча двадцать-один, * * тысяча двадцать две

это: {

как: "Come Vuoi иль Ий Uovo OGGI",

boiledEgg: "Uovo содо",

softBoiledEgg: "Uovo алл Кок",

выбор: "Come scegliere l'Uovo"

}

});

Для изменения языка вы можете использовать эту функцию в форме кода, где вы хотите изменить язык заставить определенный язык использовать что-то вроде этого:

импорт RNRestart из 'реагировать-нативную-перезагрузку';

_onSetLanguageToItalian () {

strings.setLanguage ( 'это');

* +1047 * this.setState ({});
* * RNRestart.Restart тысяча сорок-девять ()

}

act-native-restart npm используется для перезапуска приложения и отражения изменения языка во всем приложении

...