#react-native #redux #i18next #react-i18next #redux-persist
Вопрос:
Я бы хотел, чтобы i18next подождал, пока магазин redux будет готов. Я сохраняю выбранный пользователем язык в магазине, используя persistor from redux-persist
для его регидратации при запуске приложения. Я попытался установить язык из магазина :
// ...
import store from '../redux';
// ...
const lng = store.getState().user.language
? store.getState().user.language
: Localization.locale.slice(0, 2);
i18next
// .use(languageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng,
});
Но на данный момент магазин все еще находится в своем первоначальном состоянии и еще не увлажнен. Есть ли способ, которым я мог бы это сделать?
Комментарии:
1. Возможно, вам потребуется создать пользовательский детектор языка: i18next.com/misc/creating-own-plugins#languagedetector
Ответ №1:
Таким PersistGate
образом, можно реализовать onBeforeLift
метод, ожидая, пока он будет разрешен, прежде чем поднимать состояние «загрузка».
const onBeforeLift = async () => {
await initI18Next();
};
export default function App(): React.ReactElement {
return (
<Provider store={store}>
<PersistGate
loading={<SplashScreen />}
persistor={persistor}
onBeforeLift={onBeforeLift}
>
<StatusBar hidden />
<MainNavigation />
</PersistGate>
</Provider>
);
}
И в i18n.ts
:
const resources = {
en: { translation: en },
fr: { translation: fr },
he: { translation: he },
};
export const init = () => {
const lng = store.getState().user.language
? store.getState().user.language
: Localization.locale.slice(0, 2);
return (
i18next
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng,
})
);
};
export default i18next;