Eine PDF-Datei in React Native anzeigen

8

Kann jemand bitte Beispielcode für die Anzeige einer PDF in React Native? iOS und Android.

Das habe ich ausprobiert:

%Vor%

^ Dies führt zu einem roten Bildschirm des Todes mit dem Fehler "Das Modul kann nicht aufgelöst werden".

%Vor%

^ Dies gibt eine "Error Loading Page" Nachricht in der WebView. "Die angeforderte URL wurde auf diesem Server nicht gefunden"

Ich weiß, dass iOS in der Lage ist, ein PDF in einem UIWebView anzuzeigen. Ich nehme an, Android kann das gleiche tun. Es muss etwas geben, in dem die Quelle angegeben wird, die ich vermisse.

    
Axeva 09.03.2016, 18:15
quelle

1 Antwort

15

Okay, für zukünftige Generationen, hier ist, wie ich dieses Problem gelöst habe:

Aktualisiert am 13. September 2017:

Es gibt ein neues NPM-Modul, das diesen ganzen Prozess viel einfacher macht. Ich würde vorschlagen, es vorwärts statt meiner ursprünglichen Antwort unten zu verwenden:

react-native-pdf

Nach der Installation ist das Rendern der PDF-Datei so einfach:

%Vor%

Legen Sie einfach Ihre aktuelle PDF-Datei in den Ordner android/app/src/main/assets/pdf Ihres Projekts.

Ursprüngliche Antwort:

iOS

%Vor%

Der Trick ist, dass Sie My.pdf in Xcode in Ihr Projekt einfügen müssen und sicherstellen, dass es zu Ihrem Build-Ziel hinzugefügt wird.

Das Kopieren in den Projektordner von React Native war nicht ausreichend. Es musste Teil des Xcode-Projekts selbst sein.

Android

Es scheint, dass Android keinen nativen PDF-Viewer bis 5.0 (Lollipop) zur Verfügung gestellt hat. Um das zu umgehen, musste ich drei Schlüsseltechniken anwenden:

  1. Ziehen Sie die PDF-Datei aus meinem APK-Paket und speichern Sie sie im Ordner files für meine App. Diese SO-Antwort war sehr hilfreich dabei:

Android: Wie kopiert man Dateien aus dem Ordner 'Assets' in SD-Karten?

Ich habe den Code ein wenig optimiert, sodass die Datei nicht in sdcard , sondern in den files -Ordner meiner App verschoben wurde. Hier ist, was ich meinem MainActivity.java

hinzugefügt habe %Vor%

Ich habe auch sichergestellt, dass mein PDF im Ordner assets/pdf unter android/app/src/main

ist
  1. Ich habe dann das Paket react-native-fs verwendet, um die absolute URL für mein PDF zu erhalten Jetzt im Ordner files :

    %Vor%
  2. Mit all dem habe ich reagieren-native-pdf-Ansicht Laden und Anzeigen der PDF:

    %Vor%

Viel Glück!

    
Axeva 10.03.2016, 19:12
quelle

Tags und Links