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);
  }
};