react-native-pdf-view - pdfViewにbase64またはblobを埋め込む方法

Question

react-native-pdf-viewライブラリを使用していますが、pdfをPDFで読み込む際に問題があります。 （これは正常に動作します）

saveFile(filename){ 

    var base64Image = this.state.imageBase64; 

    // create a path you want to write to 
    var path = RNFS.DocumentDirectoryPath + '/' + filename; 

    // write the file 
    RNFS.writeFile(path, base64Image, 'base64').then((success) => { 
    console.log('FILE WRITTEN!'); 
    this.setState(
     {pdf_dirPath: path} 
    ); 
    this._display_fileAttachment() 
    }) 
    .catch((err) => { 
    console.log(err.message); 
    }); 
} 

Iを：私のプロジェクトがどのように動作する

は私がそのようにのようなライブラリreact-native-fsを使って、Androidのファイルシステムに保存し、サーバからのbase64 PDFを受けるということですこれでPDFビューを移入してみてください。

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

質問

react-native-pdf-viewはファイルの場所を取らなければならないか、base64 pdfかblobをとることができますか？

base64またはblobをとることができる場合は、説明するか、サンプルコードを入力してください。
おかげ

のNb：This StackOverflow questionは非常に似ているが、私はどのような形で保存または取得BASE64をファイルシステムからとPDFを移入する方法をする方法を知っておく必要があります。

Answer 1

同じ問題を抱える人にとっては、ここに解決策があります。

ソリューション

反応-nativive-PDF-ビューpdf_base64にファイルパスを取る必要があります。

最初に、react-native-fetch-blobを使用して、サーバーからpdf base64をリクエストしました（RNフェッチAPIはまだBLOBをサポートしていないため）。

また、react-native-fetch-blobには、「react-native-fs」ライブラリよりも文書化され理解しやすいFileSystem APIがあることがわかりました。 （Check out its FileSystem API documentation）

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) 
    }); 
} 

ではなく、私は上記の例で行ったようファイルの場所にpdf_base64Strを保存するのでした。私はこれをこのように保存していた：

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

これは間違っていた。ファイルのパスと

移入のPDFビュー：

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

Answer 2

これを行うにはもっと簡単な方法がありますように思えます。 RNFletchBlobにディスクに直接保存するように伝えてください。後でファイルをクリーンアップする必要があることに注意してください。 [ソースコード]として探して

RNFetchBlob 
    .config({ 
    // add this option that makes response data to be stored as a file. 
    fileCache : true, 
    appendExt : 'pdf' 
    }) 
    .fetch('GET', 'http://www.example.com/file/example.zip', { 
    //some headers .. 
    }) 
    .then((res) => { 
    // the temp file path 
    this.setState({fileLocation: res.path()}); 
    console.log('The file saved to ', res.path()) 
    }) 

そして後で

<PDFView 
    ref={(pdf)=>{this.pdfView = pdf;}} 
    path={this.state.fileLocation} 
    onLoadComplete = {(pageCount)=>{ 
    this.pdfView.setNativeProps({ 
     zoom: 1.0 
    }); 
    console.log("Load Complete. File has " + pageCount + " pages."); 
    }} 
    style={styles.pdf}/>