带有嵌套在抽屉中的选项卡的React Navigation v5

时间:2020-06-02 07:02:25

标签: reactjs react-native react-navigation

我希望抽屉式导航器从标签式导航器的边缘向内轻扫。一个抽屉用于左侧标签,一个抽屉用于右侧标签。如何为标签页和抽屉使用滑动手势?我能够在v4中使用Lock-closed和GestureRecognizer来做到这一点

示例:这是我在v4中所做的:


const MainTabNavigator = createMaterialTopTabNavigator(
  {
    Profile: { screen: Profile },
    Live: { screen: Live },
    Poll: { screen: Poll }
  },
  {
    initialRouteName: 'Live',
    defaultNavigationOptions: {
      gesturesEnabled: false,
      tabBarVisible: false
    }
  }
);

const ProfileDrawer = createDrawerNavigator(
  {
    Main: { screen: MainTabNavigator }
  },
  {
    drawerPosition: 'left',
    drawerLockMode: 'locked-closed',
    drawerOpenRoute: 'ProfileMenuOpen',
    drawerCloseRoute: 'ProfileMenuClose',
    drawerToggleRoute: 'ProfileMenuToggle',
    edgeWidth: 1000,
    contentComponent: props => (
      <ProfileMenu
        style={{ backgroundColor: 'transparent', opacity: 0.99 }}
        {...props}
      />
    )
  }
);

const PollDrawer = createDrawerNavigator(
  {
    FirstDrawer: { screen: ProfileDrawer }
  },
  {
    defaultNavigationOptions: {},
    // initialRouteName: 'FirstDrawer',
    drawerPosition: 'right',
    getCustomActionCreators: (route, stateKey) => ({
      openTopLevelDrawer: () => DrawerActions.openDrawer({ key: stateKey }),
      closeTopLevelDrawer: () => DrawerActions.closeDrawer({ key: stateKey })
    }),
    drawerLockMode: 'locked-closed',
    drawerOpenRoute: 'PollMenuOpen',
    drawerCloseRoute: 'PollMenuClose',
    drawerToggleRoute: 'PollMenuToggle',
    edgeWidth: 1000,
    contentComponent: props => (
      <PollMenu
        style={{ backgroundColor: 'transparent', opacity: 0.99 }}
        {...props}
      />
    )
  }
);

0 个答案:

没有答案