Javascript React native-在呈现应用程序组件之前从异步存储获取数据

我正在React Native上创建一个iOS应用程序，希望该应用程序支持多种语言。 当设置目标语言时，应用程序可以工作，但当我再次打开应用程序时，它会显示默认语言。我试图从异步存储中获取定义的语言，但它不反映更改并呈现应用程序组件。我使用上下文api进行本地化

我使用Launchscreen.xib显示启动屏幕，并使用app.js useffect hook中的react native SplashScreen方法SplashScreen.hide（）隐藏此启动屏幕，我希望在加载应用程序组件之前设置先前选择的语言

本地化.js文件-

import React, {createContext, useState} from 'react';
import * as RNLocalize from 'react-native-localize';
import LocalizedStrings from 'react-native-localization';
import AsyncStorage from '@react-native-community/async-storage';
import en from './translations/en.json';
import de from './translations/de.json';
import bg from './translations/bg.json';
import it from './translations/it.json';
import nl from './translations/nl.json';
import pl from './translations/pl.json';
import pt from './translations/pt.json';
import ru from './translations/ru.json';
import fr from './translations/fr.json';
import es from './translations/es.json';



const APP_LANGUAGE = 'appLanguage';
const DEFAULT_LANGUAGE = 'en';



const languages = {en, de, bg, it, nl, pl, pt, ru, fr, es};

const translations = new LocalizedStrings(languages);

export const LocalizationContext = createContext({
    translations,
    setAppLanguage: () => {},
    appLanguage: DEFAULT_LANGUAGE,
    initializeAppLanguage: () => {},
  });



export const LocalizationProvider = ({children}) => {
    const [appLanguage, setAppLanguage] = useState(DEFAULT_LANGUAGE);
   //console.log(appLanguage);
    const setLanguage = language => {
      translations.setLanguage(language);
      setAppLanguage(language);
      AsyncStorage.setItem(APP_LANGUAGE, language);
    };

    const initializeAppLanguage = async () => {
      const currentLanguage = await AsyncStorage.getItem(APP_LANGUAGE);
      console.log('language' , currentLanguage);
      if (currentLanguage === null) {
        let localeCode = DEFAULT_LANGUAGE;
        const supportedLocaleCodes = translations.getAvailableLanguages();
        const phoneLocaleCodes = RNLocalize.getLocales().map(
          locale => locale.languageCode,
        );
        phoneLocaleCodes.some(code => {
          if (supportedLocaleCodes.includes(code)) {
            localeCode = code;
            return true;
          }
        });
        setLanguage(localeCode);
      } else {
        setLanguage(currentLanguage);
      }
      onSuccess();
    };

    return (
      <LocalizationContext.Provider
        value={{
          translations,
          setAppLanguage: setLanguage,
          appLanguage,
          initializeAppLanguage,
        }}>
        {children}
      </LocalizationContext.Provider>
    );
  };

import React，{createContext，useState}来自“React”；
从“react native localize”导入*作为RNLocalize；
从“react native localization”导入本地化字符串；
从“@react native community/async storage”导入异步存储；
从“./translations/en.json”导入en；
从“/translations/de.json”导入de；
从“./translations/bg.json”导入bg；
从“./translations/it.json”导入它；
从“./translations/nl.json”导入nl；
从“./translations/pl.json”导入pl；
从“./translations/pt.json”导入pt；
从“./translations/ru.json”导入ru；
从“./translations/fr.json”导入fr；
从“./translations/es.json”导入es；
const APP_LANGUAGE='appllanguage'；
const DEFAULT_LANGUAGE='en'；
常量语言={en，de，bg，it，nl，pl，pt，ru，fr，es}；
常量翻译=新本地化字符串（语言）；
export const LocalizationContext=createContext({
翻译，
SetApplLanguage:（）=>{}，
ApplLanguage：默认语言，
initializeAppLanguage:（）=>{}，
});
导出常量本地化提供程序=（{children}）=>{
const[ApplLanguage，setApplLanguage]=useState（默认语言）；
//console.log（appllanguage）；
const setLanguage=语言=>{
翻译。setLanguage（语言）；
设置应用语言（语言）；
AsyncStorage.setItem（应用程序语言，语言）；
};
const initializeaplanguage=async（）=>{
const currentLanguage=await AsyncStorage.getItem（应用程序语言）；
console.log（'language'，currentLanguage）；
如果（currentLanguage==null）{
设localeCode=DEFAULT\u语言；
const supportedLocaleCodes=translations.getAvailableLanguages（）；
const phoneLocaleCodes=RNLocalize.getLocales（）.map(
locale=>locale.languageCode，
);
phoneLocaleCodes.some（代码=>{
if（supportedLocaleCodes.includes（代码））{
localeCode=代码；
返回true；
}
});
setLanguage（localeCode）；
}否则{
setLanguage（当前语言）；
}
onSuccess（）；
};
返回(
{儿童}
);
};

App.js文件

import React, {useEffect, useContext, useState} from 'react';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import {Provider} from 'react-redux';
import logger from 'redux-logger';
import ReduxThunk from 'redux-thunk';

import loginReducer from '_store/reducers/login.js';
import transportReducer from '_store/reducers/transport.js';
import gpsReducer from '_store/reducers/gpslogger.js';

import AppNavigator from '_navigations/AppNavigator';

import SplashScreen from 'react-native-splash-screen';
import FlashMessage from 'react-native-flash-message';
import {LocalizationContext} from './Localization';


const rootReducer = combineReducers({
  auth: loginReducer,
  transport: transportReducer,
  gps:  gpsReducer
});

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(logger, ReduxThunk)));

const App = props => {
  const {initializeAppLanguage, appLanguage} = useContext(LocalizationContext);
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    initializeAppLanguage();
    SplashScreen.hide();


  }, []);

  return (
   <Provider store={store}>

      <AppNavigator />

      <FlashMessage />
    </Provider>
  );
};

export default App;

import React，{useffect，useContext，useState}来自'React'；
从'redux'导入{createStore，combinereducer，applyMiddleware}；
从'redux devtools extension'导入{composeWithDevTools}；
从'react redux'导入{Provider}；
从“redux记录器”导入记录器；
从“redux thunk”导入redux thunk；
从“_store/reducers/login.js”导入loginReducer；
从“_store/reducers/transport.js”导入transportReducer；
从“_store/reducers/gpslogger.js”导入gpsReducer；
从“导航/AppNavigator”导入AppNavigator；
从“react native SplashScreen”导入SplashScreen；
从“react native flash message”导入FlashMessage；
从“./Localization”导入{LocalizationContext}；
const rootReducer=combinereducer({
作者：loginReducer，
运输：运输减速器，
gps:gps减速机
});
const store=createStore（rootReducer，composeWithDevTools（applyMiddleware（logger，ReduxThunk））；
const App=props=>{
const{initializeAppLanguage，ApplLanguage}=useContext（LocalizationContext）；
const[loaded，setLoaded]=useState（false）；
useffect（（）=>{
初始化aplanguage（）；
SplashScreen.hide（）；
}, []);
返回(
);
};
导出默认应用程序；

---

如何实现所需的行为？

我们正在做一些事情，在

app.js中实现相同的所需行为

setI18nConfig = () => {
    const {dispatch} = this.store;
    const translationGetters = {
      ar: () => require("../src/assets/translations/ar.json"),
      en: () => require("../src/assets/translations/en.json"),
    };

    const translate = helpers.translate();

    const fallback = { languageTag: "en", isRTL: false };

    const { languageTag, isRTL } = this.appLanguage ?  this.appLanguage  : (RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) || fallback)

    dispatch(setAppLanguage({
      languageTag,
      isRTL
    }));

    if(!this.appLanguage) {
      this.appLanguage = {languageTag, isRTL}
    }

    // clear translation cache
    translate.cache.clear();

    // set i18n-js config
    i18n.translations = { [languageTag]: translationGetters[languageTag]() };
    i18n.locale = languageTag;
  }

我通过创建一个单独的启动屏幕并在那里放置一个setTimeout方法来解决这个问题。它提供了从异步存储获取数据的时间，然后导航到主应用程序。
你好，罗文，感谢您的快速响应。我有几个问题。1.这些助手来自哪里？2.您是否在app.js 3的useffect（）钩子中调用此函数。为了翻译所有页面，您使用的是上下文api还是仅此而已？谢谢