react原生pdf视图-如何使用base64或blob填充pdfView

我正在使用该库，在用pdf填充PDFView时遇到问题

我的项目的工作原理是从服务器接收base64 pdf，然后使用如下库将其保存到android文件系统：
（这个很好用）

然后，我尝试使用以下内容填充pdf视图：

<PDFView
  ref={(pdf)=>{this.pdfView = pdf;}}
  src={"path/To/base64/pdf"}
  style={styles.pdf}
 />

{this.pdfView=pdf；}
src={“path/To/base64/pdf”}
style={styles.pdf}
/>

问题

react native pdf视图是否必须采用文件位置，或者是否可以采用base64 pdf或blob

如果可以使用base64或blob，请解释或给出如何使用的示例代码。
谢谢

注意：非常相似，但我需要知道如何以何种形式从文件系统中保存或检索base64，以及如何填充pdf。

对于任何有相同问题的人，这里是解决方案。 解决方案 react本机pdf视图必须采用pdf_base64的文件路径

首先，我使用从服务器请求pdf base64。（因为RN fetch API还不支持BLOB）

此外，我发现react native fetch blob还有一个文件系统API，它比“react native fs”库有更好的文档记录和更容易理解。（）

接收base64 pdf并将其保存到文件路径：

var RNFetchBlob = require('react-native-fetch-blob').default;

const DocumentDir = RNFetchBlob.fs.dirs.DocumentDir;

getPdfFromServer: function(uri_attachment, filename_attachment) {
   return new Promise((RESOLVE, REJECT) => {

      // Fetch attachment
      RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((res) => {
       
          let base64Str = res.data;
          let pdfLocation = DocumentDir + '/' + filename_attachment;

          RNFetchBlob.fs.writeFile(pdfLocation, pdf_base64Str, 'base64');
          RESOLVE(pdfLocation);
      })
   }).catch((error) => {
       // error handling
       console.log("Error", error)
   });
}

<PDFView
    ref={(pdf)=>{this.pdfView = pdf;}}
    src={pdfLocation}
    style={styles.pdf}
/>
        

我做错的是没有像上面的例子那样将pdf_base64Str保存到文件位置。我是这样保存的：

var pdf_base64= 'data:application/pdf;base64,'+pdf_base64Str;

这是错误的

使用文件路径填充PDF视图：

var RNFetchBlob = require('react-native-fetch-blob').default;

const DocumentDir = RNFetchBlob.fs.dirs.DocumentDir;

getPdfFromServer: function(uri_attachment, filename_attachment) {
   return new Promise((RESOLVE, REJECT) => {

      // Fetch attachment
      RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((res) => {
       
          let base64Str = res.data;
          let pdfLocation = DocumentDir + '/' + filename_attachment;

          RNFetchBlob.fs.writeFile(pdfLocation, pdf_base64Str, 'base64');
          RESOLVE(pdfLocation);
      })
   }).catch((error) => {
       // error handling
       console.log("Error", error)
   });
}

<PDFView
    ref={(pdf)=>{this.pdfView = pdf;}}
    src={pdfLocation}
    style={styles.pdf}
/>
        

{this.pdfView=pdf；}
src={pdfLocation}
style={styles.pdf}
/>

似乎有一种更简单的方法可以做到这一点。只需告诉RNFletchBlob直接保存到磁盘，就像这样。请注意，稍后您必须清理该文件。

RNFetchBlob
.config({
//添加此选项，使响应数据存储为文件。
fileCache:true，
附录：“pdf”
})
.fetch（'GET'，'http://www.example.com/file/example.zip', {
//一些标题。。
})
。然后（（res）=>{
//临时文件路径
this.setState（{fileLocation:res.path（）}）；
console.log（'保存到'，res.path（）的文件）
})

后来

{this.pdfView=pdf；}
路径={this.state.fileLocation}
onLoadComplete={（页面计数）=>{
this.pdfView.setNativeProps({
缩放：1.0
});
log（“Load Complete.File有“+pageCount+”个页面。”）；
}}
style={styles.pdf}/>

看起来，它似乎不接受base64，您必须提供一个路径。为了解决这个问题，我将

console.log

路径/To/pdf确认它已保存并且是一个好的pdf。@Kyle Finley感谢您指出这一点。问题似乎是保存文件。查看此帖子了解更多详细信息。谢谢。什么是“解析”功能？它似乎没有在任何地方定义，并且在我试图运行您的代码时给了我一个错误。@Pedram“Resolve（）返回一个使用给定值解析的承诺对象。”-哦，我明白了。这只是一个回调，当你的承诺得到解决时，它会被传入执行。