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

时间:2019-01-09 14:12:30

标签: javascript reactjs react-native react-navigation

我的应用程序使用react-navigation库进行路由,但是现在我有一个要求,我希望仅在属于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;

1 个答案:

答案 0 :(得分:0)

未经测试,但是我接下来会尝试:

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