如何使用标签导航器在一页中创建两个抽屉 [英] 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.

推荐答案

制作导航器并设置位置以适合您要显示的抽屉.并通过命令解决这个问题.

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

• StackNavigator
  • 左抽屉
    • LeftDrawScreenStackNavigator
    • RightDrawScreenStackNavigator

    抽屉导航器结构如下:

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

    命令

    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'));
    

    这篇关于如何使用标签导航器在一页中创建两个抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！