How to create two drawers in one page with tab navigator

问题

I couldnt manage to open two drawers at both sides. I can open just in one side or I can locate drawers inferior not parallel but I need parallel drawers

react-navigation v3

import React from 'react';
import {Dimensions} from 'react-native';
import { 
createAppContainer,
createDrawerNavigator,
createStackNavigator,
 } from 'react-navigation';
 import MenuDrawer from './components/MenuDrawer';

const WIDTH = Dimensions.get('window').width;
const DrawerConfig = { 
     drawerWidth: WIDTH*0.83,
     drawerPosition:'left',
     initialRouteName:'DrawerLeftStackNavigator',
     contentComponent: ({navigation}) => {
         return(<MenuDrawer/>)
     },
     drawerOpenRoute: 'LeftSideMenu',
     drawerCloseRoute: 'LeftSideMenuClose',
     drawerToggleRoute: 'LeftSideMenuToggle',
     }
     const DrawerConfig1 = {
      drawerWidth: WIDTH*0.83,
      drawerPosition:'right',
      initialRouteName:'DrawerRightStackNavigator',
      contentComponent: ({navigation}) => {
          return(<MenuDrawer/>)
      },
      drawerOpenRoute: 'RightSideMenu',
      drawerCloseRoute: 'RightSideMenuClose',
      drawerToggleRoute: 'RightSideMenuToggle',
      }
const StackDrawers = createStackNavigator({
  --->  RightDrawer: DrawerRight, (It gives error for this line first.)
  LeftDrawer: DrawerLeft,
  });
const DrawerLeft = createDrawerNavigator({
DrawerLeftStackNavigator,
},
{DrawerConfig}); 
const DrawerLeftStackNavigator = createStackNavigator ({
  Liveresults:bir,
  Standings: uc,
},
{initialRouteName: Liveresults})
const DrawerRight = createDrawerNavigator({
 DrawerRightStackNavigator,
  },
  {DrawerConfig1}); 
  const DrawerRightStackNavigator = createStackNavigator ({
    Canlısonuçlar:bir,
    Puandurumu: uc,
})
  export default createAppContainer(StackDrawers);

Drawers must open parallel and both sides also I must reach two of them separetely with two different buttons one button for each.

回答1:

Make a Navigator and set the position to fit the drawer you want to show. And resolve this through command.

StackNavigator
- LeftDrawer
  - LeftDrawScreenStackNavigator
- RightDrawer
  - RightDrawScreenStackNavigator

The drawer Navigator structure is as follows:

const LeftDrawer = createDrawerNavigator(
  {
    LeftStack,
  },
  {
    initialRouteName: 'LeftStack',
    drawerPosition: 'left',
    contentComponent: props => <LeftSideMenu {...props} />,
    drawerOpenRoute: 'LeftSideMenu',
    drawerCloseRoute: 'LeftSideMenuClose',
    drawerToggleRoute: 'LeftSideMenuToggle',
  },
);

Command

this.props.navigation.openDrawer('LeftSideMenu');
this.props.navigation.closeDrawer('LeftSideMenuClose');
this.props.navigation.toggleDrawer('LeftSideMenuToggle');

OR

this.props.navigation.dispatch(DrawerActions.openDrawer('LeftSideMenu'));
this.props.navigation.dispatch(DrawerActions.closeDrawer('LeftSideMenuClose'));
this.props.navigation.dispatch(DrawerActions.toggleDrawer('LeftSideMenuToggle'));

来源：https://stackoverflow.com/questions/57644927/how-to-create-two-drawers-in-one-page-with-tab-navigator

标签

react-native

react-navigation