页面导航
在使用 CPDFReaderView 组件展示 PDF 时,可以通过API执行以下操作:
跳转到指定页码
tsx
await pdfReaderRef.current?.setDisplayPageIndex(1);1
当需要跳转到指定页码并同时突出显示某个内容(例如点击注释时高亮该注释),可以通过 setDisplayPageIndex 的 rectList 参数在页面上绘制矩形框。
下面示例展示了在点击注释后跳转到注释所在页,并用矩形框高亮注释区域:
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();1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
效果示例:
| Android | iOS |
|---|---|
![]() | ![]() |
获取当前页码
tsx
const pageIndex = await pdfReaderRef.current?.getCurrentPageIndex();1
您还可以在使用 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);
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11

