如何关闭反应本机弹出菜单？

Question

我正在使用您的 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。

Answer 1

如他们的文档中所述，您应该在 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

Answer 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();

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

Answer 3

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

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

的 onSelect 属性

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

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

如何关闭反应本机弹出菜单？

How to close react native popup menu?

react-native

react-native-popup-menu