Skip to content

页面导航

在使用 CPDFReaderView 组件展示 PDF 时,可以通过API执行以下操作:

跳转到指定页码

tsx
await pdfReaderRef.current?.setDisplayPageIndex(1);

当需要跳转到指定页码并同时突出显示某个内容(例如点击注释时高亮该注释),可以通过 setDisplayPageIndexrectList 参数在页面上绘制矩形框。

下面示例展示了在点击注释后跳转到注释所在页,并用矩形框高亮注释区域:

tsx
const pageIndex = 0;
const page = pdfReaderRef?.current?._pdfDocument.pageAtIndex(pageIndex);
const annotations = await page?.getAnnotations();
const annotation = annotations![0];

await pdfReaderRef.current?.setDisplayPageIndex(pageIndex: annotation.page, { rectList: [annotation.rect!]});

// 取消高亮
await pdfReaderRef.current?.clearDisplayRect();

效果示例:

AndroidiOS
guides_rn_3.2.6_1guides_rn_3.2.6_2

获取当前页码

tsx
const pageIndex = await pdfReaderRef.current?.getCurrentPageIndex();

您还可以在使用 CPDFReaderView 时设置页面监听器,实时获取当前滑动的页码。

tsx
const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  onPageChanged={onPageChanged}
  configuration={ComPDFKit.getDefaultConfig({
  })} />

const onPageChanged = (pageIndex: number) => {
  console.log('ComPDFKitRN --- onPageChanged:', pageIndex);
}