Guides

上下文菜单

在创建 CPDFReaderView 时，你可以通过 CPDFConfiguration 对象中的 contextMenuConfig 字段，来自定义当注释、文本、图片或表单字段被选中时弹出的上下文菜单。

默认上下文菜单

默认情况下，当用户选中一个高亮注释时，ComPDF 会显示包含常用选项的上下文菜单，例如“备注”、“删除”和“属性”：

Android	iOS

配置菜单项

您可以通过指定要包含的菜单项来自定义上下文菜单。以下示例仅为高亮注释保留属性和删除两个选项：

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    contextMenuConfig:{
      annotationMode: {
        markupContent: menus('properties', 'delete')
      }
    }
  })} />

Android	iOS

自定义菜单项

ComPDF React Native SDK 在 2.6.0 版本中新增了添加自定义菜单项的功能。以下示例演示如何在高亮注释的上下文菜单中添加自定义菜单项。

步骤 1：配置自定义菜单项

创建 CPDFContextMenuItem 实例，配置自定义菜单项：

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    contextMenuConfig: {
      padding: [4, 0, 4, 0],
      iconSize: 40,
      fontSize: 14,
      annotationMode: {
        markupContent: menus(
          {
            key: "custom",
            identifier: "custom_show_annotation_properties_action", // 必填：唯一标识符
            title : 'Custom Action',             // 必填：菜单标题（当 showType 为 text 时）
            icon: "ic_test_properties",          // 可选：图标名称（仅 Android，当 showType 为 icon 时必填）
            showType: "text",                    // 显示类型：icon 或 text
          }
        ),
      }
    },
  })}
  onCustomContextMenuItemTapped={handleCustomContextMenuItemTapped}
  />

步骤 2：处理点击事件

通过 onCustomContextMenuItemTapped 回调处理自定义菜单项的点击事件：

const handleCustomContextMenuItemTapped = (identifier: string, event: any) => {
  if (identifier === 'custom_show_annotation_properties_action') {
    // 处理自定义菜单项的点击事件
    // 例如：显示自定义对话框、执行特定操作等
    console.log('Custom menu item tapped:', event);
  }
};

上下文菜单配置字段

字段	说明
backgroundColor	上下文菜单背景色，仅支持 Android。
fontSize	菜单文字大小，默认值为 14。
padding	菜单内边距，顺序为 [left, top, right, bottom]，仅支持 Android。
iconSize	菜单图标大小。
key	内置菜单键。自定义菜单项使用 custom。
identifier	自定义菜单项的唯一标识符，会通过 onCustomContextMenuItemTapped 返回。
title	当 showType 为 "text" 时显示的菜单文字。
icon	图标资源名称，通常配合 showType: "icon" 使用。
showType	显示方式，支持 "text" 或 "icon"。

平台说明：Android 支持 backgroundColor、padding 等更多视觉样式。iOS 侧建议优先配置菜单内容，并通过回调处理自定义行为。