是否可以使用菜单选项打开另一个菜单？

Question

目前我可以通过单击菜单触发器打开菜单，而且效果很好。我现在正在尝试实现一个过程，以便我可以打开菜单-a，select 菜单-a 中的一个选项，然后使用滑入方法打开菜单-b。这个模块可以吗？

Answer 1

您可以使用 menu as controlled component 来声明应该打开和关闭哪些菜单。例如：

export default class ControlledExample extends Component {
  state = {
    opened1: false,
    opened2: false,
  }

  render() {
    return (
      <MenuContext style={{ flexDirection: 'column', padding: 30 }}>
        <Menu
          opened={this.state.opened1}
          onBackdropPress={() => this.setState({ opened1: false })}
          onSelect={() =>
            this.setState({
              opened1: false,
              opened2: true,
            })}
        >
          <MenuTrigger
            onPress={() => this.setState({ opened1: true })}
            text="Select option"
          />
          <MenuOptions>
            <MenuOption value={1} text="One" />
            <MenuOption value={2} text="Two" />
            <MenuOption value={3} text="Three" />
          </MenuOptions>
        </Menu>
        <Menu
         renderer={SlideInMenu}
          opened={this.state.opened2}
          onBackdropPress={() => this.setState({ opened2: false })}
          onSelect={() => this.setState({ opened2: false })}
        >
          <MenuTrigger />
          <MenuOptions>
            <MenuOption value={1} text="One *" />
            <MenuOption value={2} text="Two *" />
            <MenuOption value={3} text="Three *" />
          </MenuOptions>
        </Menu>
      </MenuContext>
    )
  }
}