打开/关闭导航抽屉在本机反应中不起作用答案

【问题标题】：opening/closing navigation drawer not working in react native打开/关闭导航抽屉在本机反应中不起作用
【发布时间】：2019-04-05 08:56:45
【问题描述】：

在我的 react native 应用程序中，我使用 Drawer Navigator 创建了一个侧边菜单，当我通过滑动打开它时它运行良好。但我想做的是在单击按钮时打开它。目前我正在尝试做槽导航道具，相关代码如下：

import { withNavigation } from 'react-navigation';

class HallsList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isSideMenuOpen: false
    };
  } 

  renderTopView = () => {
      return(
        <View>
          <View style = {Styles.sideMenuButton}>
            <Button
              onPress = {()=> {
                if (this.state.isSideMenuOpen) {
                  {this.props.navigation.navigate('DrawerOpen')}
                }
                else {
                  {this.props.navigation.navigate('DrawerClose')}
                }
                this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})
              }
            }
            title = {'Side Menu'}
            />
          </View> ..... 


export default withNavigation(HallsList);

但是当我点击侧面菜单按钮时，它会被点击，但之后什么也没有发生。

【问题讨论】：

标签： react-native react-navigation side-menu react-navigation-drawer

【解决方案1】：

打开抽屉使用this.props.navigation.openDrawer() 并关闭抽屉使用this.props.navigation.closeDrawer()

from this Document

【讨论】：

【解决方案2】：

你可以简单地使用：

this.props.navigation.toggleDrawer();

代替：

// to keep track of state of drawer
if (this.state.isSideMenuOpen) {
    {this.props.navigation.navigate('DrawerOpen')}
}
else {
    {this.props.navigation.navigate('DrawerClose')}
}
this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})

【讨论】：

【解决方案3】：

只需更改以下代码部分

而不是this.props.navigation.navigate('DrawerOpen')

输入this.props.navigation.openDrawer();

而不是this.props.navigation.navigate('DrawerClose')

输入this.props.navigation.closeDrawer();

【讨论】：

非常感谢 :)