如何在 react-native 中加载本地 pdf 文件？答案

【问题标题】：How to load local pdf file in react-native?如何在 react-native 中加载本地 pdf 文件？
【发布时间】：2019-11-18 14:54:25
【问题描述】：

我想在单击按钮时打开一个 pdf。另外，我不使用 react-native-pdf 因为我在将它与 react-native 链接时出错。所以，现在我尝试使用 rn-pdf-reader-js 显示 pdf。它适用于从网络加载 pdf，但无法加载本地文件。我该如何解决？这是我的代码。

 <PDFReader
      source={{ uri: "file:///D:/test/Angular.pdf" }}
  />

错误：“对 blob 的响应无效”；

【问题讨论】：

【解决方案1】：

这个问题很笼统，因为您没有提及您使用的是什么设备。我个人遇到了与您描述尝试在 ANDROID 设备上完成 pdf 加载相同的错误和麻烦。

经过多次摆弄，主要是反复试验，我终于想出了一个解决方案。我很高兴与遇到类似障碍的人分享它。

'react-native-pdf' 是您正在寻找的库 (react-native-pdf documentation)。仔细按照说明进行操作。以下是文档中的一些重要注意事项：

'android/app/src/main/assets/pdf/'

确保使用“.pdf”扩展名命名文件。
文档中提供了必要代码的最简单、最直接的示例。也使用样式。
该示例提供了不同的“来源”选项。如果您尝试在 Android 设备上查看 pdf，请使用：const source = {uri:'bundle-assets://yourdocument.pdf'};

【讨论】：

【解决方案2】：

您正在尝试从计算机的 D: 驱动器加载一个文件。在大多数情况下，您的模拟器（或设备）无权访问该驱动器。由此产生的问题是它试图寻找一条在它自己的驱动器中不存在的路径。

您应该将文件移动到模拟器（或设备）的存储中，并尝试使用您的应用可用的路径从那里加载它。

请注意，在某些平台/操作系统上，您需要访问用户文件的权限，例如下载文件夹、图片库...

阅读内容以帮助您：

【讨论】：

是的，感谢您的回答。我试试这个方法。但我仍然对如何从本地设备加载 pdf 感到困惑。我找到了文档和图像的选择器，但没有找到 pdf 的选择器。我现在正在使用 expo-filesystem 进行测试。但还没有工作。