如何关闭反应原生弹出菜单？答案

【问题标题】：How to close react native popup menu?如何关闭反应原生弹出菜单？
【发布时间】：2017-03-14 08:25:46
【问题描述】：

我正在使用您的 react-native-popup-menu 作为注销按钮。当按钮单击身份验证删除时，屏幕将进入登录。但菜单仍然存在。

屏幕切换时如何关闭此菜单？

<Menu>
  <MenuTrigger>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

最初由 bexoss 在 react-native-popup-menu GitHub 上提出。

【问题讨论】：

标签： react-native react-native-popup-menu

【解决方案1】：

这里的所有其他答案都可以。这是另一个（更简单）的问题解决方案，具体取决于您的要求。

您正在处理 Text 组件中的注销事件，因此不会触发关闭菜单的处理程序。尝试将其传递给 MenuOption 的 onSelect 属性：

<MenuOption onSelect={() => this.props.onLogout()}>
  <Text>logout</Text>
</MenuOption>

注意：如果您从处理程序返回 false，菜单将不会关闭。

【讨论】：

【解决方案2】：

https://github.com/instea/react-native-popup-menu/blob/master/doc/api.md

上面的 API 文档声明有一个 close() 方法。

因此，您只需声明 ref 属性即可直接访问您的 Menu 组件。例如“menuRef”：

<Menu uref='menuRef'>
  <MenuTrigger>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

然后您可以从当前组件中的任何位置简单地调用：this.refs.menuRef.close();

这种方法也会使结束动画化。

【讨论】：

如 react-native 文档中所述，您应尽可能避免使用 refs。更多here
这两种方法各有优缺点。如果您担心 UX，在这种情况下您会使用 ref 方法，因为它具有与之关联的动画功能。如果您担心遵循最佳实践，请使用 state。

【解决方案3】：

正如他们的文档中提到的，您应该在您的 Menu 组件中使用 visible 属性。您需要像这样调整您的代码：

<Menu opened={this.state.opened}>
  <MenuTrigger onPress={() => this.setState({ opened: true })}>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
        this.setState({ opened: false })
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

我认为您需要像这样定义组件的默认状态：

 constructor(props) {
   super(props)
   this.state = { opened: false }
 }

您还可以找到完整示例here

【讨论】：

这种方法不会为菜单的关闭设置动画。如果您想使用动画功能，请使用 close 方法。