, поэтому я застрял при реализации поддержки иврита и RTL в React Native App (с Expo SDK), который использует реагирование-навигацию и redux-persist.
Поскольку пользователи моего приложения должны иметь возможностьсменить язык внутри приложения (так что меня не волнует системный язык, только во время самого первого открытия приложения) В настоящее время я использую redux-persist , чтобы сохранить redux состояние после перезапуска приложения.
Я также создал простую вспомогательную функцию, которая получает состояние только из хранилища резервов:
export function isHebrew() {
return !!(getReduxLanguage().locale.includes('he') && getReduxIsRTL());
}
Проблема в том, что Я использую эту вспомогательную функцию isHebrew внутри моих StyleSheets , чтобы решить, как визуализировать компоненты, а также внутри createNavigator реагирующей навигации для той же цели.изменить порядок элементов в bottomTabBar НО таблицы стилей и навигатор так или иначе вызываются перед сохранением регидратов redux-persist, что заканчивается неправильным рендерингом всего приложения (isHebrewвсегда false перед регидратацией, так как initialState пуст для языка до регидратации).
Поэтому у меня такой вопрос: как отложить загрузку таблицы стилей и навигации после повторной регидратации магазина с избыточным сохранением?
Я делаю это так:
App.js
...
componentDidMount() {
this.persistor = persistStore(store, null, () => {
this.setState({ isReduxRehydrated: true });
});
}
render() {
if (!this.state.isLoadingComplete && !this.state.isReduxRehydrated) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
}
return (
<Provider store={store}>
<PersistGate loading={<ActivityIndicator/>} persistor={this.persistor}>
<Root />
</PersistGate>
</Provider>
);
}
...
но это не работает, даже если я закомментирую компонент isHebrew по-прежнему вызывается внутри таблиц стилей / навигатораперед приставкой-сохранением.
Использование внутри таблиц стилей:
StyleSheet.create({
container: {
flexDirection: isHebrew() ? 'row-reverse' : 'row',
}
})
Использование внутри навигации:
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
ProfileStack,
ScheduleStack,
MarketStack,
MoreStack
},
{
tabBarOptions: {
showLabel: false,
style: {
flexDirection: isHebrew() ? 'row-reverse' : 'row',
}
}
}
);