React native 如何在重新启动应用程序时使react native应用程序保存所选语言

我希望我的应用程序包含一个设置屏幕，以便我可以从选择器更改语言。我希望语言变化反映在整个应用程序上，我希望应用程序记住上次选择的语言。下面给出了为en、am或tg导入键值对语言的my index.js

index.js

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

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

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

I18n.translations = {
  default: en,
  'en-US': en,
  en,
  am,
  or,
  tg,

};

I18n.fallbacks = true;
export default I18n;

我想从设置屏幕更改应用程序的语言。在那里我准备了一个选择语言的选择器。下面给出了我的设置屏幕代码

SettingScreen.js

import I18n from './../i18n/locales';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

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.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.dropdown}>
              <Picker
                mode="dropdown"
                iosHeader={''} 
                style={{ width: width,height:70,}}
                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>
)
  }
}

从“/../I18n/locales”导入I18n；
const width=Dimensions.get（'window'）.width；
const height=维度.get（'window'）。高度；
常量列表语言=[
{key:'en'，label:'en'}，{key:'am'，label:'am'}，{key:'or'，label:'or'}，{key:'tg'，label:'tg'}，]
导出默认类设置Screen扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:true，
所选语言：“en”
};
}
backToMain（）{
this.props.navigation.navigate（'LocationTrackingScreen'，{}）；
}
车把靠背压力=（）=>{
this.props.navigation.navigate（'LocationTrackingScreen'，{}）；
返回true；
};
hideSpinner（）{
this.setState（{visible:false}）；
}
componentDidMount（）{
BackHandler.addEventListener（'hardwareBackPress'，this.handleBackPress）；
}
组件将卸载（）{
BackHandler.removeEventListener（'hardwareBackPress'，this.handleBackPress）；
}
onChangeLanguage（选择的语言）{
这是我的国家({
语言选择
})
I18n.locale=languageSelected
}
render（）{
const{languageSelected}=this.state
返回(
);
}
}
类DropdownLanguage扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
{listLanguage.map（（languageItem，i）=>{
返回
})}
)
}
}

您可以将所选语言保存在AsyncStorage中，当用户打开应用程序时，您可以检查AsyncStorage中最后选择的语言并将其设置为应用程序语言。这是我在项目中的一个示例：

在laguage更改中，在异步存储中设置语言，如下所示

    export const changeLanguage = async lang => {
         setI18nConfig(lang);
         AsyncStorage.setItem('language', lang);
     };

let language = await AsyncStorage.getItem('language');
changeLanguage(language);

当用户重新打开应用程序时，只需在第一个屏幕上获取语言并将其设置为应用程序语言，如下所示

    export const changeLanguage = async lang => {
         setI18nConfig(lang);
         AsyncStorage.setItem('language', lang);
     };

let language = await AsyncStorage.getItem('language');
changeLanguage(language);

---

我希望这将帮助您创建一个名为TranslationManager.js的文件，并在其中粘贴以下代码

import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
import {I18nManager, AsyncStorage} from 'react-native';

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  en: () => require('./Languages/en.json'),
  ar: () => require('./Languages/ar.json'),
};
export const translate = memoize((key, config) => i18n.t(key, config));
// export const translate = text => {
//   console.log(i18n.t(text));
// };

export const setI18nConfig = lang => {
  // fallback if no available language fits
  const fallback = {languageTag: 'en', isRTL: false};

  const {isRTL, languageTag} =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout directio
  // set i18n-js config
  I18nManager.forceRTL(false);
  i18n.translations = {['en']: translationGetters.en()};
  i18n.locale = 'en';

  if (lang) {
    i18n.translations = {[lang]: translationGetters[lang]()};
    i18n.locale = lang;
  } else {
    i18n.translations = {['en']: translationGetters.en()};
    i18n.locale = 'en';
  }
};

export const changeLanguage = async lang => {
  setI18nConfig(lang);
  AsyncStorage.setItem('language', lang);
};

export const isRTL = () => {
  return translate('lang') === 'ar' ? true : false;
};

不，您有一个单独的类来更改应用程序的语言。 只需在任何需要的地方导入此changeLanguage函数，并按如下方式更改语言：

import {changeLanguage} from '../../Translations/TranslationManager';
let language = await AsyncStorage.getItem('language');
changeLanguage(language);

您可以通过以下方式显示翻译后的文本：

import {translate} from '../../Translations/TranslationManager';
<Text>translate('ForumScreen.title')</Text>

从“../../Translations/TranslationManager”导入{translate}；
翻译（'ForumScreen.title'）

---

希望它现在和将来都能帮助你。

你能在零食上分享吗？@Oliver D这是零食上的代码谢谢你的回答，但我不知道如何将它集成到我的代码中，你能帮我写这个@where do i need to write the code do i need to write on index.js或SettingScreen吗。js@melaku在设置屏幕上更改语言时，需要在AsyncStorage中设置语言。当你重新打开应用程序时，只需从index.js上的AsyncStorage获取语言，并以相同的方式更改语言，但这次使用的是从AsyncStorage获得的语言。AsyncStorage是react native的本地存储，即使您关闭或终止应用程序，它也会保留数据Orry应用程序仍以默认语言启动您可以共享正在更改的代码吗index.js上的语言（'import{changeLanguage}from./TranslationManager'；import{translate}from./TranslationManager'import en from./en'；import am from./am'；import or from./or'；import tg from./tg'；melalanguage=async（）=>{let language=wait asynchstorage.getItem（'language'）；changeLanguage（language）；}）const locales=RNLocalize.getLocales（）；if（Array.isArray（locales））{I18n.locale=locales[0].languageTag；}I18n.fallbacks=true；I18n.translations={default:en，“en-US”：en，en，en，am，or，tg，sl，}；导出默认的I18n；'？）