Question

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

Answer 1

您可以使用菜单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>
    )
  }
}

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

1 个答案: