React Native Hold Menu 组件使用示例详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01184/article/details/148992838

React Native Hold Menu 组件使用示例详解

react-native-hold-menu 📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-hold-menu

前言

React Native Hold Menu 是一个功能强大的长按菜单组件，它允许开发者在移动应用中创建类似 iOS 3D Touch 或 Android 长按菜单的交互体验。本文将详细介绍该组件的各种配置方式和实际应用示例，帮助开发者快速掌握其使用方法。

基础列表配置

简单菜单列表

最基本的用法是创建一个包含几个选项的菜单：

<HoldItem
  items={[
    { text: '回复', onPress: () => {} },
    { text: '编辑', onPress: () => {} },
    { text: '删除', onPress: () => {} },
  ]}
/>

这种配置会生成一个包含三个选项的简单菜单，用户长按后会显示这三个选项。

带标题的菜单

为了更好的用户体验，可以为菜单添加标题：

<HoldItem
  items={[
    { text: '操作', isTitle: true, onPress: () => {} },
    { text: '回复', onPress: () => {} },
    { text: '编辑', onPress: () => {} },
    { text: '删除', onPress: () => {} },
  ]}
/>

isTitle 属性会将该项标记为标题，通常显示在菜单顶部，与其他选项有视觉区分。

带分隔线的菜单

对于功能分组的菜单，可以使用分隔线：

<HoldItem
  items={[
    { text: '操作', isTitle: true, onPress: () => {} },
    { text: '回复', onPress: () => {} },
    { text: '编辑', onPress: () => {} },
    { text: '删除', withSeparator: true, onPress: () => {} },
    { text: '分享', onPress: () => {} },
  ]}

withSeparator 属性会在该项上方添加一条分隔线，用于视觉上区分不同功能组的选项。

高级功能配置

危险操作标识

对于删除等危险操作，可以使用 isDestructive 属性标记：

<HoldItem
  items={[
    { text: '操作', isTitle: true, onPress: () => {} },
    { text: '回复', onPress: () => {} },
    { text: '编辑', onPress: () => {} },
    {
      text: '删除',
      withSeparator: true,
      isDestructive: true,
      onPress: () => {},
    },
    { text: '分享', onPress: () => {} },
  ]}

标记为 isDestructive 的选项通常会以红色显示，提醒用户这是危险操作。

带图标的菜单

为了增强菜单的可识别性，可以添加图标：

<HoldItem
  items={[
    { text: '操作', isTitle: true, onPress: () => {} },
    {
      text: '首页',
      icon: () => <Icon name="home" size={18} />,
      onPress: () => {},
    },
    {
      text: '编辑',
      icon: () => <Icon name="edit" size={18} />,
      onPress: () => {},
    },
    {
      text: '删除',
      icon: () => <Icon name="delete" size={18} />,
      withSeparator: true,
      isDestructive: true,
      onPress: () => {},
    },
    {
      text: '分享',
      icon: () => <Icon name="share" size={18} />,
      onPress: () => {},
    },
    {
      text: '更多',
      icon: () => <Icon name="more-horizontal" size={18} />,
      onPress: () => {},
    },
  ]}

每个选项可以自定义图标组件，通常使用矢量图标库如 react-native-vector-icons 来实现。