Stack Navigator 抽屉图标单击抽屉未打开但滑动打开时

Posted 2023-02-22

【中文标题】Stack Navigator 抽屉图标单击抽屉未打开但滑动打开时

【英文标题】：Stack Navigator drawer icon click drawer not opening but when slide it opening

【发布时间】：2019-04-04 12:25:21

【问题描述】：

我希望在单击左侧图标时打开抽屉；这是我的代码：

const stackNav = StackNavigator(
  Main : 
    screen: MainScreen,
    navigationOptions: (navigation) => (
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress=() => navigation.navigate("DrawerOpen")>
          <iosIcon name="ios-menu" size=30 onPress=() => navigation.navigate("DrawerOpen") />
        </TouchableOpacity>
      ),
      headerStyle:   
    )
  
);

【参考方案1】：

试试：

import  DrawerActions, createDrawerNavigator  from 'react-navigation';

然后：

const stackNav = createDrawerNavigator(
  Main : 
    screen: MainScreen,
    navigationOptions: (navigation) => (
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress=() =>  navigation.dispatch(DrawerActions.openDrawer()); >
          <IOSIcon name="ios-menu" size=30 onPress=() =>  navigation.dispatch(DrawerActions.openDrawer());  />
        </TouchableOpacity>
      ),
      headerStyle:   
    )
  
);

您在使用 stackNavigator 时无法显示抽屉；这就是我使用 createDawerNavigator 变量的原因。 请注意，DrawerNavigator 和 StackNavigator 已弃用，请改用 createDrawerNavigator 和 createStackNavigator。

【讨论】：

嗨，Steve Nossse，它在滑动时工作，但抽屉图标和标题没有显示，你能帮我吗

可能是因为在 headerStyle 上返回 null ？删除它并重试

【参考方案2】：

打开、关闭和切换抽屉的默认设置是：

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();

您可以在按钮的 onPress 属性中使用它们。 像这样， <Button onPress=() => this.props.navigation.openDrawer(); />