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

时间:2017-03-14 08:25:47

标签: react-native react-native-popup-menu

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

3 个答案:

答案 0 :(得分: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();

这种方法也会为结束做好准备。

答案 1 :(得分:2)

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

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

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

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

答案 2 :(得分:1)

正如他们的文档中所述,您应该使用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