Guides

自定义 Note 注释创建弹窗

ComPDF React Native SDK 支持控制创建 Note 注释后是否自动显示 SDK 默认编辑弹窗。你可以关闭默认弹窗，在 React Native 层接收已创建的 Note 注释，并展示自定义编辑 UI。

流程

1. 将 autoShowNoteEditDialog 设置为 false。
2. 用户选择 Note 工具并点击页面。
3. SDK 创建 Note 注释，并通过 onAnnotationCreationPrepared 返回该注释。
4. React Native UI 展示自定义弹窗。
5. 将用户输入保存到返回的注释中；如果用户取消，则移除该注释。

配置

const configuration = ComPDFKit.getDefaultConfig({
  annotationsConfig: {
    autoShowNoteEditDialog: false,
    availableTypes: [CPDFAnnotationType.NOTE],
  },
});

配置项	类型	默认值	说明
autoShowNoteEditDialog	boolean	true	创建 Note 注释后是否自动显示 SDK 默认编辑弹窗

与 interceptNoteAction 的区别

配置项	作用场景	说明
autoShowNoteEditDialog	创建新的 Note 注释后	控制是否自动显示默认 Note 编辑弹窗
interceptNoteAction	点击已有 Note 注释时	控制是否拦截已有 Note 的默认点击编辑行为

回调 API

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={configuration}
  onAnnotationCreationPrepared={(type, annotation) => {
    if (type === CPDFAnnotationType.NOTE && annotation) {
      // 展示自定义 Note 弹窗。
    }
  }}
/>

参数	说明
type	当前准备创建或已创建的注释类型。该流程中为 CPDFAnnotationType.NOTE
annotation	已创建的 Note 注释对象。根据自定义弹窗结果更新或移除该对象

注意： 回调触发时，Note 注释已经添加到 PDF 页面中。如果用户取消自定义弹窗，请移除已创建的 Note 注释，避免页面残留空注释。