Visualizzazione di un PDF in React Native

Question

Qualcuno può fornire un codice di esempio per la visualizzazione di un PDF in React Native? iOS e Android.

Questo è quello che ho provato:

render: function() { 
    return <WebView 
     source={require('./my.pdf')} 
     /> 
    } 

^Questo si traduce in un Red Screen of Death con l'errore "Impossibile risolvere modulo".

render: function() { 
    return <WebView 
     source={{uri: 'my.pdf'}} 
     /> 
    } 

^Questo dà un messaggio "Errore durante il caricamento della pagina" nella WebView. "L'URL richiesto non è stato trovato su questo server"

So che iOS è in grado di mostrare un PDF in un UIWebView. Presumo che Android possa fare lo stesso. Ci deve essere qualcosa nel modo in cui viene specificata la fonte che mi manca.

Answer 1

Va bene, per le generazioni future, ecco come ho risolto questo problema:

Aggiornato il 13 Settembre, 2017:

C'è un nuovo modulo NPM che rende l'intero processo molto più facile. Io suggerirei di usare andando avanti invece di mia risposta iniziale di seguito:

react-native-pdf

Una volta installato, rendendo il PDF è facile come questo:

export default class YourClass extends Component { 
    constructor(props) { 
    super(props); 
    this.pdf = null; 
    } 

    render() { 
    let yourPDFURI = {uri:'bundle-assets://pdf/YourPDF.pdf', cache: true}; 

    return <View style={{flex: 1}}> 
     <Pdf ref={(pdf)=>{this.pdf = pdf;}} 
     source={yourPDFURI} 
     style={{flex: 1}} 
     onError={(error)=>{console.log(error);}} /> 
    </View> 
    } 
} 

Basta mettere il pdf effettivo nel android/app/src/main/assets/pdf cartella del tuo progetto.

risposta originale:

iOS

render: function() { 
    return <WebView source={{uri: 'My.pdf'}}/> 
} 

Il trucco è che è necessario includere My.pdf nel progetto in Xcode e assicurarsi che sia aggiunto al vostro target build.

Non è stato sufficiente copiarlo nella cartella del progetto React Native. Doveva essere parte del progetto Xcode stesso.

Android

Sembra che Android non ha fornito un visualizzatore PDF nativo fino a 5.0 (Lollipop). Per aggirare il problema, ho dovuto fare uso di tre tecniche principali:

1. Estrarre il PDF dal mio fagotto APK e memorizzarlo nella cartella files per la mia app. Questo SO risposta è stata molto utile nella realizzazione di questo:

Android: How to copy files from 'assets' folder to sdcard?

ho ottimizzato il codice un po 'in modo che il file non aveva intenzione di un sdcard ma nella cartella del mio app files.Ecco quello che ho aggiunto alla mia MainActivity.java

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 

    AssetManager assetManager = getAssets(); 
    String[] files = null; 

    try { 
     files = assetManager.list("pdf"); 
    } catch (IOException e) { 
     Log.e("tag", "Failed to get asset file list.", e); 
    } 

    if (files != null) for (String filename : files) { 
     InputStream in = null; 
     OutputStream out = null; 

     try { 
     in = assetManager.open("pdf/" + filename); 

     File outFile = new File(getFilesDir(), filename); 
     out = new FileOutputStream(outFile); 
     copyFile(in, out); 
     Log.e("tag", "Copy was a success: " + outFile.getPath()); 
     } catch(IOException e) { 
     Log.e("tag", "Failed to copy asset file: " + "pdf/" + filename, e); 
     } 
     finally { 
      if (in != null) { 
       try { 
        in.close(); 
       } catch (IOException e) { 
        // NOOP 
       } 
      } 
      if (out != null) { 
       try { 
        out.close(); 
       } catch (IOException e) { 
        // NOOP 
       } 
      } 
     } 
    } 
} 

private void copyFile(InputStream in, OutputStream out) throws IOException { 
    byte[] buffer = new byte[1024]; 
    int read; 
    while((read = in.read(buffer)) != -1){ 
     out.write(buffer, 0, read); 
    } 
} 

ho anche fatto in modo che il mio PDF si trova nella cartella assets/pdf sotto android/app/src/main

2. Ho quindi utilizzato il pacchetto react-native-fs per ottenere il assoluto URL al mio PDF, che ora è nella cartella files:

   var RNFS = require('react-native-fs'); 
   var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf'; 
   

3. Con tutto questo a posto, ho usato react-native-pdf-view a carico effettivamente e visualizzare il PDF:

   import PDFView from 'react-native-pdf-view'; 
   
   render: function() { 
       var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf'; 
   
       return <PDFView 
       ref={(pdf)=>{this.pdfView = pdf;}} 
       src={absolutePath} 
       style={ActharStyles.fullCover} /> 
   } 
   

Buona fortuna!