将 HOC 与反应导航导航器一起使用

Question

我的应用程序使用 react-navigation 库进行路由，但现在我有一个要求，我想在属于 TabNavigator 的路由上显示一个模式窗口。我认为如果我创建一个高阶组件并使用它来包装 TabNavigator，这将起作用，但这似乎不起作用。

那么，向反应导航导航器添加功能的正确方法是什么？

选项卡路由.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);

路线.js

TabNavigator 是 SwitchNavigator 的一部分，但只有选项卡的路由才能显示模式。

import TabRoutes from './routes/TabRoutes';
const AppRoutes = createSwitchNavigator({
  Loading: LoadingScreen,
  Auth: AuthStack,
  App: TabRoutes,
}, {
  initialRouteName: 'Loading'
});

我的提供程序.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

未经测试，但我接下来会尝试这个：

选项卡路由.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？