点击时反应原生显示选项 [英] React Native on click show options

问题描述

在Android手机联系人页面右上角有一个三个点图标(第一张图片)。单击时，将显示一个菜单(第二张图片)。

我已搜索，但找不到任何针对此行为的第三方软件包。我不想使用选取器或类似的工具。

推荐答案

我会使用类似的包：https://www.npmjs.com/package/react-native-material-menu

下面是如何使用此软件包的简单代码片段：

import React from 'react';


import { View, Text } from 'react-native';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

class App extends React.PureComponent {
  _menu = null;

  setMenuRef = ref => {
    this._menu = ref;
  };

  hideMenu = () => {
    this._menu.hide();
  };

  showMenu = () => {
    this._menu.show();
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Menu
          ref={this.setMenuRef}
          button={<Text onPress={this.showMenu}>Show menu</Text>}
        >
          <MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
          <MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
          <MenuItem onPress={this.hideMenu} disabled>
            Menu item 3
          </MenuItem>
          <MenuDivider />
          <MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
        </Menu>
      </View>
    );
  }
}

export default App;

这篇关于点击时反应原生显示选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！