npm 包 @cqingwang/react-native-pdf-view 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 React Native 开发中，需要显示 PDF 文件时，我们一般使用 @react-native-community/pdf-view 作为 PDF 渲染组件。但是，该组件在某些情况下会显示空白页面，无法正常显示 PDF 文件。因此，我们需要使用另一个 PDF 渲染组件 @cqingwang/react-native-pdf-view。

@cqingwang/react-native-pdf-view 简介

@cqingwang/react-native-pdf-view 是一款基于 React Native 的 PDF 渲染组件。它使用 PDF.js 库来渲染 PDF 文件，并在 React Native 环境中提供了相应的接口。该包支持 Android 和 iOS 平台，并提供了各种控制 PDF 显示的 API 接口。

安装 @cqingwang/react-native-pdf-view

您可以使用 npm 包管理工具来安装 @cqingwang/react-native-pdf-view。

npm install @cqingwang/react-native-pdf-view --save

使用 @cqingwang/react-native-pdf-view

下面我们将详细介绍如何使用 @cqingwang/react-native-pdf-view 这个组件。

引入组件

import PDFView from "@cqingwang/react-native-pdf-view";

渲染组件

-- -------------------- ---- -------
--------
  ------------ -- -
    ------------ - --------
  --
  ----------------------
  ------------------------------------
  ----------------------
  ----------------------------------
  -------- ----- - --
--

设置属性

ref: 设置 ref，可以用来调用组件提供的 API。
path: 设置 PDF 文件的路径。
onLoadComplete: 加载完成回调函数，参数为 PDF 总页数。
onError: 加载错误回调函数，参数为错误信息。
onPageChanged: 页面变化回调函数，参数为当前页码。
style: 设置组件样式。

调用 API

@cqingwang/react-native-pdf-view 提供了一些常用的 API，方便我们控制 PDF 显示。

跳转到指定页

this.pdfView.goToPage(pageNumber);

获取当前页码

this.pdfView.getCurrentPage();

// 回调函数示例：
getCurrentPage = () => {
  this.pdfView.getCurrentPage(pageNumber => {
    console.log(pageNumber);
  });
};

获取总页面数

this.pdfView.getPageCount();

// 回调函数示例：
getPageCount = () => {
  this.pdfView.getPageCount(pageCount => {
    console.log(pageCount);
  });
};

缩放 PDF

this.pdfView.zoomTo(scale);

// 回调函数示例：
zoomTo = () => {
  this.pdfView.zoomTo(2);
};

示例代码

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ------ - ---- ---------------
------ ------- ---- -----------------------------------

------ ------- ----- --- ------- --------- -
  ----- - -
    ----- --
  --

  -------------- - --------- -- -
    ------------------ ---- ------ ---------------
  --

  ------- - ----- -- -
    ---------------------
  --

  ------------- - ---------- -- -
    -------------------- ----- ----------------
  --

  -------- -
    ------ -
      ----- -------- ----- - ---
        --------
          ------------ -- -
            ------------ - --------
          --
          ----------------------
          ------------------------------------
          ----------------------
          ----------------------------------
          -------- ----- - --
        --
        ----- -------- -------------- ----- ---
          -------
            ----------- - --
            ----------- -- -
              -------------------------
            --
          --
          -------
            --------------
            ----------- -- -
              -------------------------------------- -- -
                -------------------- ----- ----------------
              ---
            --
          --
          -------
            --------------
            ----------- -- -
              ----------------------------------- -- -
                ------------------ ---- ------ ---------------
              ---
            --
          --
          -------
            --------- ----
            ----------- -- -
              -----------------------
            --
          --
        -------
      -------
    --
  -
-

结语

通过本文的介绍，我们可以看到 @cqingwang/react-native-pdf-view 这个组件的强大之处。它使用 PDF.js 库来渲染 PDF 文件，并提供了丰富的控制 API，十分方便易用。希望本文的介绍能够帮助到大家，在日后的 React Native 开发中更加顺利。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055b1d81e8991b448d8c64