Блог

Я немного новичок в react native.

Я пытаюсь открыть всплывающее меню из плоского списка

поэтому, если пользователь нажимает на что-то вроде трех точек в углу каждого элемента списка, появляется всплывающее окно с интерактивными опциями, похожими на приведенные ниже изображения

Изображение 1 — Начальное состояние, перед щелчком по трем точкам справа от каждого элемента плоского списка

Изображение 2- конечное состояние, после нажатия на три точки справа от каждого элемента плоского списка, пожалуйста, посоветуйте мне, как я могу добиться этого в react native

Спасибо

Я предлагаю вам использовать 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>
  );
}