React Native:使不可编辑的文本框长可点击以显示自定义上下文菜单

Question

我在React Native项目上工作。这有一些不可编辑的文本输入框，我想要的功能，当用户长按在任何一个，它应该显示一个菜单或弹出选项，使编辑在文本框。

我已经找到了一些菜单库，但他们没有像预期的那样工作。我也尝试了react-native-paper菜单，但问题是我必须将代码放在无用的菜单下。有没有更好的方法来使用它，比如在长按下我只是调用一个函数，它应该显示菜单。

当前代码为:

import * as React from 'react';
import { View } from 'react-native';
import { Button, Menu, Divider, Provider } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View
style={{
paddingTop: 50,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Menu
visible={visible}
onDismiss={closeMenu}
// I have to put my all code here, in the anchor to show menu
anchor={<Button onPress={openMenu}>Show menu</Button>}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Divider />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</View>
</Provider>
);
};

有什么干净的方法来做吗?我是新手，我不明白发生了什么，如何管理它。

Answer 1

您可以使用此库" react-native-pop -menu "。

<Menu>
<MenuTrigger>
///You can Pass Text Here on which user will click
</MenuTrigger>
<MenuOptions customStyles={optionsStyles}>
//Here you can Pass options that you want to include
<MenuOption onSelect={() => onPressService(item)} text="Edit" />
<MenuOption
onSelect={() => DeleteProduct(item)}
text="Delete"
/>
</MenuOptions>
</Menu>

别忘了提供Provider

<MenuProvider>
<ScreenName {...props} />
</MenuProvider>