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

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 2

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

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

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

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

Answer 3

正如他们的文档中所述，您应该使用visible组件中的Menu道具。您将需要像这样调整您的代码：

<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

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

3 个答案: