react native pdf
v6.7.1
Eine reagierende native PDF-Ansichtskomponente (plattformübergreifende Unterstützung)
Wir verwenden react-native-blob-util , um den Dateisystemzugriff in diesem Paket zu verwalten. Daher sollten Sie „react-native-pdf“ und „react-native-blob-util“ installieren
Die folgende Tabelle zeigt die unterstützten Versionen von React Native und React-Native-Blob-Util für verschiedene Versionen von
react-native-pdf.
| Native reagieren | 0,4x - 0,56 | 0,57 | 0,60+ | 0,62+ | 0,62+ |
|---|---|---|---|---|---|
| React-Native-PDF | 4.xx - 5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| React-native-blob-util | 0,13,7+ |
Expo: Dieses Paket ist in der Expo Go-App nicht verfügbar. Erfahren Sie, wie Sie dieses Paket in Custom Dev Clients über das Out-of-Tree Expo Config Plugin verwenden können. Beispiel:
with-pdf.
# Using npm
npm install react-native-pdf react-native-blob-util --save
# or using yarn:
yarn add react-native-pdf react-native-blob-utilBefolgen Sie dann die Anweisungen für Ihre Plattform, um „react-native-pdf“ in Ihr Projekt einzubinden:
React Native 0.60 und höher
Führen Sie pod install im ios -Verzeichnis aus. In React Native 0.60 und höher ist keine Verknüpfung erforderlich.
React Native 0.59 und niedriger
react-native link react-native-blob-util
react-native link react-native-pdfWenn Sie RN 0.59.0 und höher verwenden , fügen Sie bitte Folgendes zu Ihrer android/app/build.gradle hinzu**
android {
+ packagingOptions {
+ pickFirst 'lib/x86/libc++_shared.so'
+ pickFirst 'lib/x86_64/libjsc.so'
+ pickFirst 'lib/arm64-v8a/libjsc.so'
+ pickFirst 'lib/arm64-v8a/libc++_shared.so'
+ pickFirst 'lib/x86_64/libc++_shared.so'
+ pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+ }
}Reagieren Sie auf Native 0.59.0 und niedriger
react-native link react-native-blob-util
react-native link react-native-pdfwindowsyourapp.sln ).node_modulesreact-native-pdfwindowsRCTPdfRCTPdf.vcxprojnode_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxproj hinzuprogress-view und in LösungsprojekteRCTPdf und ReactNativeBlobUtil auspch.h #include "winrt/RCTPdf.h" hinzu.#include "winrt/ReactNativeBlobUtil.h" aus.App.cpp PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); vor InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); hinzu. und PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Um eine test.pdf wie im Beispiel hinzuzufügen, fügen Sie Folgendes hinzu:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
in der App .vcxproj Datei vor <None Include="packages.config" /> .
Q1. Nach der Installation und Ausführung kann ich die PDF-Datei nicht sehen.
A1: Vielleicht haben Sie vergessen, react-native link auszuführen, oder er läuft nicht richtig. Sie können es manuell hinzufügen. Einzelheiten finden Sie in den Ausgaben #24 und #2
Q2. Beim Ausführen wird angezeigt, 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Ihre React-Native-Version ist zu alt, bitte aktualisieren Sie sie auf 0.47.0+, siehe auch #39
Q3. Wenn ich die Beispiel-App ausführe, erhalte ich einen weißen/grauen Bildschirm / der Ladebalken schreitet nicht voran.
A3. Überprüfen Sie Ihre URI. Wenn Sie auf eine PDF-Datei zugreifen, die auf einem http gehostet wird, müssen Sie Folgendes tun:
iOS: Fügen Sie eine Ausnahme für den Server hinzu, der die PDF-Datei in der ios info.plist hostet. Hier ist ein Beispiel:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>yourserver.com</key>
<dict>
<!--Include to allow subdomains-->
<key>NSIncludesSubdomains</key>
<true/>
<!--Include to allow HTTP requests-->
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
<!--Include to specify minimum TLS version-->
<key>NSTemporaryExceptionMinimumTLSVersion</key>
<string>TLSv1.1</string>
</dict>
</dict>
</dict>
Android: see here
Q4. Warum funktioniert es nicht mit React Native Expo?
A4. Expo unterstützt kein natives Modul. Weitere Messevorbehalte können Sie here lesen
F5. Warum kann ich das iOS-Beispiel nicht ausführen? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Führen Sie die folgenden Befehle im Projektordner aus (z. B. react-native-pdf/example ), um sicherzustellen, dass alle Abhängigkeiten verfügbar sind:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
v6.7.5
v6.7.4
v6.7.3
v6.7.2
v6.7.1
v6.7.0
v6.6.2
v6.6.1 deprimiert
v6.6.0 deprimiert
v6.5.0
v6.4.0
v6.3.0
[mehr]
/**
* Copyright (c) 2017-present, Wonday (@wonday.org)
* All rights reserved.
*
* This source code is licensed under the MIT-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react' ;
import { StyleSheet , Dimensions , View } from 'react-native' ;
import Pdf from 'react-native-pdf' ;
export default class PDFExample extends React . Component {
render ( ) {
const source = { uri : 'http://samples.leanpub.com/thereactnativebook-sample.pdf' , cache : true } ;
//const source = require('./test.pdf'); // ios only
//const source = {uri:'bundle-assets://test.pdf' };
//const source = {uri:'file:///sdcard/test.pdf'};
//const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
//const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
//const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};
return (
< View style = { styles . container } >
< Pdf
source = { source }
onLoadComplete = { ( numberOfPages , filePath ) => {
console . log ( `Number of pages: ${ numberOfPages } ` ) ;
} }
onPageChanged = { ( page , numberOfPages ) => {
console . log ( `Current page: ${ page } ` ) ;
} }
onError = { ( error ) => {
console . log ( error ) ;
} }
onPressLink = { ( uri ) => {
console . log ( `Link pressed: ${ uri } ` ) ;
} }
style = { styles . pdf } />
</ View >
)
}
}
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
justifyContent : 'flex-start' ,
alignItems : 'center' ,
marginTop : 25 ,
} ,
pdf : {
flex : 1 ,
width : Dimensions . get ( 'window' ) . width ,
height : Dimensions . get ( 'window' ) . height ,
}
} ) ;| Eigentum | Typ | Standard | Beschreibung | iOS | Android | Windows | Erste Veröffentlichung |
|---|---|---|---|---|---|---|---|
| Quelle | Objekt | nicht null | PDF-Quelle wie {uri:xxx, Cache:false}. Weitere Informationen finden Sie im Folgenden. | ✔ | ✔ | ✔ | <3,0 |
| Seite | Nummer | 1 | Anfangsseitenindex | ✔ | ✔ | ✔ | <3,0 |
| Skala | Nummer | 1,0 | sollte minScale<=scale<=maxScale sein | ✔ | ✔ | ✔ | <3,0 |
| minScale | Nummer | 1,0 | Min. Skala | ✔ | ✔ | ✔ | 5.0.5 |
| maxScale | Nummer | 3,0 | maximale Skala | ✔ | ✔ | ✔ | 5.0.5 |
| horizontal | bool | FALSCH | Zeichnen Sie die Seitenrichtung. Wenn Sie die Ausrichtungsänderung hören möchten, können Sie [react-native-orientation-locker] verwenden. | ✔ | ✔ | ✔ | <3,0 |
| zeigtHorizontalScrollIndicator | bool | WAHR | Zeigt oder verbirgt die horizontale Bildlaufleistenanzeige unter iOS | ✔ | 6.6 | ||
| zeigtVerticalScrollIndicator | bool | WAHR | Zeigt oder verbirgt die Anzeige der vertikalen Bildlaufleiste unter iOS | ✔ | 6.6 | ||
| scrollEnabled | bool | WAHR | Scrollen aktivieren oder deaktivieren | ✔ | 6.6 | ||
| fitWidth | bool | FALSCH | Wenn „true“ an die Breite der Ansicht angepasst wird, kann „fitWidth=true“ nicht zusammen mit „scale“ verwendet werden | ✔ | ✔ | ✔ | <3,0, ab 3,0 aufgegeben |
| fitPolicy | Nummer | 2 | 0:Breite anpassen, 1:Höhe anpassen, 2:Beide anpassen (Standard) | ✔ | ✔ | ✔ | 3,0 |
| Abstand | Nummer | 10 | die Trennergröße zwischen den Seiten | ✔ | ✔ | ✔ | <3,0 |
| Passwort | Zeichenfolge | „“ | PDF-Passwort ruft bei einem Passwortfehler OnError() mit der Meldung „Passwort erforderlich oder falsches Passwort“ auf. | ✔ | ✔ | ✔ | <3,0 |
| Stil | Objekt | {backgroundColor:"#eee"} | Unterstützt den normalen Ansichtsstil. Sie können damit die Rahmen-/Abstandsfarbe festlegen ... | ✔ | ✔ | ✔ | <3,0 |
| progressContainerStyle | Objekt | {backgroundColor:"#eee"} | Unterstützt den normalen Ansichtsstil. Sie können damit die Rahmen-/Abstandsfarbe festlegen ... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (Fortschritt) => Komponente | Zeigen Sie es beim Laden als Indikator an, damit Sie Ihre Komponente verwenden können | ✔ | ✔ | ✖ | <3,0 | |
| Antialiasing aktivieren | bool | WAHR | Verbessern Sie das Rendering auf Bildschirmen mit niedriger Auflösung ein wenig, aber unter Android 4.4 kann es natürlich zu Problemen kommen. Fügen Sie also einen Schalter hinzu | ✖ | ✔ | ✖ | <3,0 |
| Paging aktivieren | bool | FALSCH | Zeigt nur eine Seite auf dem Bildschirm an | ✔ | ✔ | ✔ | 5.0.1 |
| enableRTL | bool | FALSCH | Scrollen Sie durch die Seite als „Seite3, Seite2, Seite1“. | ✔ | ✖ | ✔ | 5.0.1 |
| enableAnnotationRendering | bool | WAHR | Aktivieren Sie die Rendering-Anmerkung. Hinweis: iOS unterstützt nur die Anfangseinstellung, keine Echtzeitänderungen | ✔ | ✔ | ✖ | 5.0.3 |
| Aktivieren Sie DoubleTapZoom | bool | WAHR | Aktivieren Sie die Geste „Doppeltippen zum Zoomen“. | ✔ | ✔ | ✖ | 6.8.0 |
| trustAllCerts | bool | WAHR | Erlauben Sie Verbindungen zu Servern mit selbstsignierter Zertifizierung | ✔ | ✔ | ✖ | 6.0.? |
| einzelne Seite | bool | FALSCH | Nur erste Seite anzeigen, nützlich für Miniaturansichten | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | Funktion (Prozent) | null | Rückruf beim Laden, Ladefortschritt zurückgeben (0-1) | ✔ | ✔ | ✖ | <3,0 |
| onLoadComplete | function(numberOfPages, path, {width, height}, tableContents) | null | Rückruf, wenn das Laden der PDF-Datei abgeschlossen ist, Rückgabe der Gesamtseitenzahl, des lokalen PDF-/Cache-Pfads, der {Breite, Höhe} und des Inhaltsverzeichnisses | ✔ | ✔ | ✔ aber ohne Tabelleninhalte | <3,0 |
| onPageChanged | function(page,numberOfPages) | null | Rückruf bei Seitenwechsel, aktuelle Seite und Gesamtseitenzahl zurückgeben | ✔ | ✔ | ✔ | <3,0 |
| onError | Funktion(Fehler) | null | Rückruf, wenn ein Fehler aufgetreten ist | ✔ | ✔ | ✔ | <3,0 |
| onPageSingleTap | Funktion(Seite) | null | Rückruf, wenn die Seite einmal angetippt wurde | ✔ | ✔ | ✔ | 3,0 |
| onScaleChanged | Funktion (Skala) | null | Rückruf beim Skalieren der Seite | ✔ | ✔ | ✔ | 3,0 |
| onPressLink | Funktion(uri) | null | Rückruf, wenn auf den Link getippt wird | ✔ | ✔ | ✖ | 6.0.0 |
| Parameter | Beschreibung | Standard | iOS | Android | Windows |
|---|---|---|---|---|---|
| uri | PDF-Quelle, Einzelheiten finden Sie im Folgenden. | erforderlich | ✔ | ✔ | ✔ |
| Cache | Cache verwenden oder nicht | FALSCH | ✔ | ✔ | ✖ |
| CacheFileName | Spezifischer Dateiname für die zwischengespeicherte PDF-Datei | SHA1(uri)-Ergebnis | ✔ | ✔ | ✖ |
| Ablauf | Cache-Datei ist in Sekunden abgelaufen (0 ist nicht abgelaufen) | 0 | ✔ | ✔ | ✖ |
| Verfahren | Anfragemethode, wenn uri eine URL ist | "ERHALTEN" | ✔ | ✔ | ✖ |
| Kopfzeilen | Header anfordern, wenn uri eine URL ist | {} | ✔ | ✔ | ✖ |
| Verwendung | Beschreibung | iOS | Android | Windows |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | PDF von einer URL laden | ✔ | ✔ | ✔ |
{require("./test.pdf")} | PDF laden, bezogen auf die JS-Datei (muss nicht durch xcode hinzugefügt werden) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Laden Sie PDF-Dateien aus Assets. Die Datei sollte sich unter android/app/src/main/assets/path/to/xxx.pdf befinden | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | Wenn Sie PDFs aus Assets laden möchten, müssen Sie PDFs über xcode zum Projekt hinzufügen. Dies unterstützt keinen Ordner. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | PDF aus Base64-String laden | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | Laden Sie PDF aus dem lokalen Dateisystem | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | Laden Sie das mit der UWP-App gebündelte PDF | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | PDF vom Inhalts-URI laden | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | PDF von der Blob-URL laden | ✖ | ✔ | ✖ |
*) erfordert die Erstellung von React Native aus dem Quellcode mit diesem Patch
Methoden arbeiten mit einem Verweis auf das PDF-Element. Sie können eine Referenz mit dem folgenden Code erhalten:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Legen Sie die aktuelle Seite der PDF-Komponente fest. pageNumber ist eine positive ganze Zahl. Wenn pageNumber > numberOfPages, wird die aktuelle Seite nicht geändert.
Beispiel:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
