react-native - 带有选项的列表项

Question

有没有办法用 react-native 做类似这张照片的事情？

我将有一个项目列表，每个项目都可以单击右侧按钮（我的示例中的 3 个点）并访问更多选项，例如查看/编辑、删除等...

我尝试查看 LIST 组件选项，但找不到可以做相同或类似的事情。

标签： react-native

Answer 1

不幸的是，你需要自己设计它，这里有一些粗略的想法：

const [showOptions, setShowOptions ] = useState(false);
const [itemIdSelected, setItemIdSelected = useState(); //so react know which item is         
selected when you click the three dots button

const Data = [{id:.....},.....]; //your data for the list items

const showOptionsHandler = (itemId)=>{
setOptionsShown(true);
setItemIdSelected(itemId);
};

return(

...
<Flatlist
...
data={Data}
renderItem(({item})=>{
    //render the item componet..

    <TouchableHighlight onPress = {()=>{showOptionsHandler(item.id)}}>
        <Ionicons ... />
    </TouchableHighlight>
/>
})

{showOptions && <YourOwnComponentToShowTheOptions />}
//you need to design your own component with the options, which should be 
some       
touchable components, and when pressed, do something for the item selected 
with the 
help of the state 'itemIdSelected'

)