Question

我无法在两侧打开两个抽屉。我可以只打开一侧，也可以找到不平行的抽屉，但是我需要平行抽屉

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

抽屉必须平行打开，并且两侧也必须分别用两个不同的按钮分别打开其中的两个按钮。

Answer 1

进行导航并设置位置以适合要显示的抽屉。并通过命令解决此问题。

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

如何使用标签导航器在一页中创建两个抽屉

1 个答案: