Поддержка RTL / иврита с React Native + реагировать на навигацию и redux-persist - PullRequest
0 голосов
/ 25 марта 2019

, поэтому я застрял при реализации поддержки иврита и 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',
      }
    }
  }
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...