npm 包 react-native-pdf-viewer 使用教程

介绍

随着移动互联网的不断发展，我们的工作和生活中离不开各种文档和报表，在移动端中预览 PDF 文件也不成问题。本教程将介绍如何使用 react-native-pdf-viewer 这个 npm 包来实现在 React Native 中预览 PDF 文件。

安装

在开始之前，请确保您已经安装了 React Native 环境。接下来，需要使用 npm 进行安装。

npm install react-native-pdf-viewer --save

同时，对于 iOS 系统而言，还需要进行 Pod 安装：

cd ios && pod install

使用方法

基本用法

使用 react-native-pdf-viewer 进行 PDF 文件预览只需要简单的几步。

首先，需要导入包：

import PDFView from 'react-native-pdf-viewer';

然后在渲染视图中，加入组件以实现预览功能：

<PDFView
  path={pdfPath}
  onError={error => console.log('onError', error)}
  onLoad={pageCount => console.log('load complete', pageCount)}
  gpcEnabled={false}
  style={styles.pdfView}
  renderLoader={() => <ActivityIndicator size="large" color="red" />}
/>

这里，path 属性指示了 PDF 文件的路径，onError 属性为错误回调函数，onLoad 属性为成功加载时的回调函数，gpcEnabled 属性用于开启或关闭缩放功能，style 属性用于设置 CSS 样式，renderLoader 属性用于自定义加载时的样式。

高级用法

在正常的使用情况下，我们可以不使用 isBuffer 属性即可对文件进行加载。但是，如果需要加载一些二进制数据，请使用 isBuffer 属性。

<PDFView
  data={pdfData}
  isBuffer={true}
  onError={error => console.log('onError', error)}
  onLoad={pageCount => console.log('load complete', pageCount)}
  style={styles.pdfView}
  renderLoader={() => <ActivityIndicator size="large" color="red" />}
/>

这里，data 属性指示了 PDF 文件的二进制数据，isBuffer 属性告诉组件数据是以 Buffer 类型传入的。

动态设置 PDF 文件路径

我们可以使用 setState 方法，通过改变状态来动态改变 PDF 文件的预览路径。示例代码如下：

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

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

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

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

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

在这里，我们在渲染视图前设置了一个文本输入框来动态的改变 PDF 预览路径。

总结

在本文中，我们学习了如何使用 react-native-pdf-viewer 这个 npm 包来在 React Native 中预览 PDF 文件，并提供了详细的示例代码。我们可以通过这个方法来方便地预览并处理移动端中的 PDF 文件相关问题。

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