Использование HOC с навигационно-навигационным навигатором

Question

Мое приложение использует библиотеку реагирования для маршрутизации, но теперь у меня есть требование, в котором я хочу показать модальное окно только для маршрутов, принадлежащих TabNavigator. Я думал, что это сработает, если я создаю компонент высшего порядка и использую его для обертывания TabNavigator, но, похоже, это не сработает.

Итак, что будет правильным способом добавить функциональность в реагирующий навигационный навигатор?

TabRoutes.js

Это прекрасно работает без провайдера, но маршруты недоступны, как только я добавляю провайдера в TabNavigator.

import myProvider from './providers/myProvider';

const TabRoutes = createBottomTabNavigator({
  Main: {screen: HomeStack},
  Moments: {screen: MomentStack},
  Settings: {screen: SettingsRoutes}
},{
  initialRouteName: 'Main'
});

export default myProvider(TabRoutes);

Routes.js

TabNavigator является частью SwitchNavigator, но только маршруты вкладок должны отображать модальные значения.

import TabRoutes from './routes/TabRoutes';

const AppRoutes = createSwitchNavigator({
  Loading: LoadingScreen,
  Auth: AuthStack,
  App: TabRoutes,
}, {
  initialRouteName: 'Loading'
});

myProvider.js

const myProvider = (wrappedComponent) => {

  class extends React.Component {
    render (
      <View>
        <WrappedComponent {...this.props}>
        <MyModal visible={...}>
          ... // rest of modal
        </MyModal>
      </View>
    );
  }
}

export default myProvider;

Answer 1

Не проверено, но я бы попробовал следующее:

TabRoutes.js

import myProvider from './providers/myProvider';

const TabRoutes = createBottomTabNavigator({
    Main: {screen: myProvider(HomeStack)},
    Moments: {screen: myProvider(MomentStack)},
    Settings: {screen: myProvider(SettingsRoutes)}
},{
    initialRouteName: 'Main'
});

export default TabRoutes;

... так же наверняка вы хотите обернуть компоненты экрана, а не все TabRoutes?