Question

所以我在使用React-navigation和redux-persist的React Native App（带有Expo SDK）中实现希伯来语和RTL支持时遇到了麻烦。

由于我的应用程序的用户应该能够在应用程序内更改语言（因此，我并不真正在意系统语言，仅在应用程序首次打开时就如此），我目前正在使用 redux-persist ，以便在重新启动应用后保持 redux 状态。

我还创建了简单的帮助程序功能，该功能仅从redux存储获取状态：

export function isHebrew() {
  return !!(getReduxLanguage().locale.includes('he') && getReduxIsRTL());
}

问题是，我在我的 StyleSheets 中使用了辅助功能 isHebrew 来决定如何渲染组件以及在内部做出反应-导航的 createNavigator ，目的是为了更改 bottomTabBar 中项目的顺序，但在redux-persist补水存储之前，会以某种方式调用BUT样式表和导航器，最终导致整个应用程序呈现错误（补液前isHebrew始终为false，因为补液前语言的initialState为空）。

所以我的问题是： 如何推迟样式持久化和导航加载，以使Redux-persist商店补水？

我正在这样做：

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在redux-persist之前仍在样式表/导航器中被调用。

在样式表中的用法：

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',
      }
    }
  }
);

通过React Native + react-navigation和redux-persist支持RTL /希伯来语

0 个答案: