javascript - 如何在本机反应中将消失的弹出菜单添加到平面列表

Question

我对原生反应有点陌生。

我正在尝试从平面列表中打开弹出菜单

因此，如果用户单击每个列表项角上的三个点之类的东西，则会出现一个弹出窗口，其中包含类似于下图的可单击选项

图 1- 初始状态，在单击每个 flatList 项右侧的三个点之前

图 2-最终状态，单击每个 flatList 项目右侧的三个点后 请告诉我如何在 react native 中实现这一点

谢谢

标签： javascriptreactjsreact-native

Answer 1

我建议你使用react-native-material-menu。

示例代码：

import React from 'react';
import React, { useState } from 'react';

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

export default function App() {
  const [visible, setVisible] = useState(false);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  return (
    <View style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
      <Menu
        visible={visible}
        anchor={<Text onPress={showMenu}>Show menu</Text>}
        onRequestClose={hideMenu}
      >
        <MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
        <MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
      </Menu>
    </View>
  );
}