2

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

4

3 回答 3

5

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

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

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

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

于 2017-03-14T10:42:01.710 回答
2

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

您还可以在此处找到完整示例

于 2017-03-14T08:35:49.373 回答
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();

这种方法也将动画关闭。

于 2017-03-14T08:40:38.090 回答