React-Native:如何在汉堡包菜单上显示抽屉组件

时间:2018-06-12 07:50:48

标签: react-native react-navigation native-base

我想在汉堡包菜单上点击抽屉组件,而不是从左向右拖动,反之亦然。这就是代码

主屏幕 ...

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

2 个答案:

答案 0 :(得分:0)

添加此行

<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

答案 1 :(得分:0)

如果您正在使用2018-05-09 13:27:31.319283中的抽屉导航器,请使用react-navigation功能打开导航抽屉。

openDrawer

关闭导航抽屉使用

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