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

PDF 阅读是很多前端项目都需要的功能，而 @meifacil/react-native-pdf-view 是一款在 React Native 中使用的 PDF 阅读组件。本文将介绍如何使用这款 npm 包。

安装

使用 npm 安装 @meifacil/react-native-pdf-view：

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

使用

导入组件：

import PDFView from '@meifacil/react-native-pdf-view';

渲染组件：

<PDFView
  resource={resource}
/>

其中，resource 为 PDF 文件路径，可以是本地路径或远程路径，例如：

const resource = 'https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf';

resource 还可以是文件 Buffer，例如：

const buffer = await RNFetchBlob.fs.readFile('file://path/to/myfile.pdf', 'base64');
const resource = `data:application/pdf;base64,${buffer}`;

属性

PDFView 组件支持以下属性：

resource：(string) PDF 文件路径或者 Buffer，必填。
resourceType：(string) 资源类型，可选 'url' 或 'base64'。默认为 'url'。
enableAntialiasing：(boolean) 是否启用抗锯齿。默认为 false。
page：(number) 需要显示的页码。默认为第一页。
scale：(number) 缩放比例。默认为 1。
spacing：(number) 页面之间的间距。默认为 10。
onPageChanged：(function) 当页码发生变化时调用的回调函数，入参为当前页码。

示范

下面的代码演示了如何使用 @meifacil/react-native-pdf-view。

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

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

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

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

结论

@meifacil/react-native-pdf-view 提供了一款方便易用的 PDF 阅读组件，使得在 React Native 项目中使用 PDF 阅读成为了轻而易举的事情。如果您需要 PDF 阅读功能，那么可以尝试使用这款组件。

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