Question

我目前正在尝试从V1升级到react-native-navigation V2，并且试图找到一种方法来切换顶部菜单栏按钮上的侧菜单。

我的应用开始于

Navigation.setRoot({
        root: {
          sideMenu: {
            left: {
              component: {
                name: 'testApp.SideDrawer',
                passProps: {
                  text: 'This is a left side menu screen'
                }
              }
            },
            center: {
              bottomTabs: {
                ...
              }
            },
          },
        },

      });

在当前版本中有办法吗？

Answer 1

原来，您不能在V2中使用this.props.navigator.toggleDrawer，而应该使用Navigator.mergeOptions来更改抽屉的可见性。就我而言：

1）首先为抽屉分配一个ID（id：leftSideDrawer）

Navigation.setRoot({
            root: {
              sideMenu: {
                left: {
                  component: {
                    name: 'testApp.SideDrawer',
                    id: 'leftSideDrawer'
                  }
                },
                center: {
                  bottomTabs: {
                    ...
                  }
                },
              },
            },
          });

2）用于更改抽屉的可见性

Navigation.mergeOptions('leftSideDrawer', {
      sideMenu: {
        left: {
          visible: true
        }
      }
});

Answer 2

您可以在组件中设置一个布尔值以标识侧面抽屉屏幕的当前状态，然后可以使用该布尔值通过mergeOptions设置抽屉的可见性。基本上切换！以下是实现此目的的代码段。

constructor(props) {
   super(props);
   this.isSideDrawerVisible = false; 
   Navigation.events().bindComponent(this);
}

navigationButtonPressed({ buttonId }) {
   if (buttonId === "openSideDrawer") {
   (!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
   Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
      left: {
        visible: this.isSideDrawerVisible,
      }
    }
  });
 }
}

按下按钮打开SideMenu

2 个答案: