3

如果我从应用程序内的设置屏幕更改语言，它不会更改应用程序中已打开路线的语言。语言变化仅反映在未开放的路线上。我使用了 react-native-localize 和 i18n-js。在我的代码下面给出

index.js

import * as RNLocalize from 'react-native-localize';
import I18n from 'i18n-js';
import memoize from 'lodash.memoize'; 


import {I18nManager,
        AsyncStorage} from 'react-native';

import en from './en';
import am from './am';
import or from './or';
import tg from './tg';
import sl from './sl';


const locales = RNLocalize.getLocales();
if (Array.isArray(locales)) {
  I18n.locale = locales[0].languageTag;
}


I18n.fallbacks = true;
I18n.translations = {
  default: en,
  'en-US': en,
  en,
  am,
  or,
  tg,
  sl,
};

export default I18n;

我可以更改语言的设置屏幕是：

设置屏幕.js

const listLanguage = [
  {key:'en', label:'En'}, {key:'am', label:'Am'} ,{key:'or', label: 'Or'}, {key:'tg', label:'TG'},] 

export default class SettingsScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true ,
                  languageSelected: 'en'
    };
  }

  backToMain() {
    this.props.navigation.navigate('LocationTrackingScreen', {});
  }

  handleBackPress = () => {
    this.props.navigation.navigate('LocationTrackingScreen', {});
    return true;
  };

  hideSpinner() {
    this.setState({ visible: false });
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
  }

  onChangeLanguage(languageSelected){
    this.setState({
      languageSelected
    })
       I18n.locale = languageSelected 
  }

  render() {
    const {languageSelected} = this.state

    return (
      <SafeAreaView style={styles.container}>

      <View style={styles.headerContainer}>
        <TouchableOpacity
          style={styles.backArrowTouchable}
          onPress={() => this.backToMain()}>
          <Image style={styles.backArrow} source={backArrow} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>{I18n.t('setting.setting_title')}</Text>
      </View>

      <View style={styles.containerLangSelect}>
          <Text style={styles.sectionDescription}>{I18n.t('setting.select_language')}</Text>
      </View>   

      <View style={styles.containerDropdown}>
        <DropdownLanguage language={languageSelected} onChangeLanguage={this.onChangeLanguage.bind(this)}></DropdownLanguage>
      </View>
    </SafeAreaView>
    );
  }
}
class DropdownLanguage extends React.Component {
  constructor(props) {
    super(props)  
  }

  render() {
    return (

    <View style={styles.dropdownLanguage}>

            {/* <Text style={{width:10,}}>{I18n.t('setting.select_language')}: </Text>   */}
              <Picker
                mode="dropdown"
                iosHeader={''} 
                style={{ width: width,
                         }}
                selectedValue={this.props.language}
                onValueChange={this.props.onChangeLanguage.bind(this)}
              >
                {listLanguage.map((languageItem, i) => {
                    return <Picker.Item key={i} value={languageItem.key} label= {languageItem.label} />
                })}
              </Picker>
            </View>
    )
  }
}
4

0 回答 0