React-Native：如何在汉堡菜单单击时显示抽屉组件答案

【问题标题】：React-Native:How to display drawercomponent on hamburger menu clickReact-Native：如何在汉堡菜单单击时显示抽屉组件
【发布时间】：2018-06-12 07:50:48
【问题描述】：

我想在汉堡菜单点击时显示抽屉组件，而不是从左到右拖动，反之亦然。这是代码

主屏幕 ...

<CustomHeader title="Home" drawerOpen={() => this.props.navigation.navigate('DrawerOpen')} />

... 自定义标题

  <Header style={styles.themeBGColor}>
        <Left><Icon name="ios-menu" onPress={() => this.props.drawerOpen()} /></Left>
        <Body>
           <Title>{this.props.title}</Title>
        </Body>
      <Right />
  </Header>

App.js

    const MyApp = DrawerNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Home: {
    screen: HomeScreen,
  },
  Categories: {
    screen: CategoryScreen,
  },
},
  {
    initialRouteName: 'Home',
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  });

【问题讨论】：

是的，点击它应该向右滑动

标签： react-native react-navigation native-base

【解决方案1】：

添加这一行

<Icon name="ios-menu" onPress={() => this.props.navigation.navigate('DrawerToggle');}>

和

     const MyApp = DrawerNavigator(
      {

      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
        drawerLockMode: 'locked-closed',
        drawerPosition: 'right',
    })
      },
      Categories: {
        screen: CategoryScreen,
      },
    },
      {
        initialRouteName: 'Home',
        contentComponent: CustomDrawerContentComponent,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle', 

      });

ref

【讨论】：

好的，单击汉堡菜单时如何将其向右滑动？
是的，即使在从左到右更改后，当我点击汉堡菜单抽屉时也没有出现
请理解我的问题，当我点击汉堡菜单时如何切换抽屉

【解决方案2】：

如果您使用react-navigation 的抽屉导航器，请使用openDrawer 函数打开抽屉导航。

onPress={() => this.props.navigation.openDrawer()}

关闭导航抽屉使用

onPress={() => this.props.navigation.closeDrawer()}

【讨论】：

那是多余的不是吗？关于什么。 . . onPress={this.props.navigation.openDrawer} onPress={this.props.navigation.closeDrawer}