react native render pdf
v1.0.12
Eine hohe Performance & Feature Rich React native PDF-Ansichtskomponente, die in OBJ-C ++ für iOS, Kotlin für Android und C ++ für Windows geschrieben wurde
Wir verwenden react-native-blob-util um den Zugriff auf das Dateisystem in diesem Paket zu verarbeiten, sodass Sie die React-Native-Render-PDF und den React-nativ-Blob-Util installieren sollten
Die folgende Tabelle zeigt die unterstützten Versionen von React Native und React-Native-Blob-Util für verschiedene Versionen von
react-native-render-pdf.
| Reagieren Sie nativ | 0,57+ |
|---|---|
| React-Native-Render-PDF | 1.0.0+ |
| React-nativ-Blob-Util | 0,13.7+ |
Expo: Dieses Paket ist in der Expo -Go -App nicht verfügbar. Erfahren Sie, wie Sie dieses Paket in benutzerdefinierten Dev-Clients über das Out-of-Tree-Expo-Konfigurations-Plugin verwenden können. Beispiel:
with-pdf.
# Using npm
npm install react-native-render-pdf react-native-blob-util --save
# or using yarn:
yarn add react-native-render-pdf react-native-blob-utilBefolgen Sie dann die Anweisungen für Ihre Plattform, um den React-Native-Render-PDF in Ihr Projekt zu verknüpfen:
Reagieren Sie native 0,60 und höher
Führen Sie pod install im ios -Verzeichnis aus. Die Verknüpfung ist bei React Native 0,60 und höher nicht erforderlich.
Reagieren Sie native 0,59 und darunter
react-native link react-native-blob-util
react-native link react-native-render-pdf** Fügen Sie Ihrem Android/Build hinzu. Gradle **
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}Wenn Sie RN 0.59.0 und höher verwenden , fügen Sie Ihre Anhänger für Ihre Android/App/Build hinzu. Gradle **
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 native 0,59.0 und darunter
react-native link react-native-blob-util
react-native link react-native-render-pdfwindowsyourapp.sln )node_modulesreact-native-render-pdfwindowsRCTPdfRCTPdf.vcxprojnode_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxprojprogress-view und in Lösungsprojekten ausRCTPdf und ReactNativeBlobUtilpch.h #include "winrt/RCTPdf.h" hinzufügen#include "winrt/ReactNativeBlobUtil.h"App.cpp add PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); vor InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); und PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); So fügen Sie einen test.pdf wie im Beispiel hinzufügen:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
In der App .vcxproj -Datei, bevor <None Include="packages.config" /> .
Q1. Nach der Installation und dem Ausführen kann ich die PDF -Datei nicht sehen.
A1: Vielleicht haben Sie vergessen, react-native link zu reagieren, oder es läuft nicht korrekt. Sie können es manuell hinzufügen. Für Details können Sie das Problem #24 und #2 sehen
Q2. Beim Laufen zeigt es 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Ihre React-Nat-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 / Die Ladeleiste Fortschritte nicht.
A3. Überprüfen Sie Ihren URI. Wenn Sie auf ein PDF schlagen, das auf einem http gehostet wird, müssen Sie Folgendes tun:
iOS: Fügen Sie eine Ausnahme für den Server hinzu, auf dem das PDF 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 Expo -Vorbehalte finden Sie here
Q5. 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 (z. B. react-native-render-pdf/example ) aus, um sicherzustellen, dass alle Abhängigkeiten verfügbar sind:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
[mehr]
/**
* Original Author: Wonday (@wonday.org) Copyright (c) 2017-present
* Copyright (c) 2024-present, Staxtech (@gidraphdanford.dev)
* 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-render-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 | Fenster | Firstrelase |
|---|---|---|---|---|---|---|---|
| Quelle | Objekt | nicht null | PDF -Quelle wie {uri: xxx, cache: false}. Weitere Informationen finden Sie im Folgenden. | ✔ | ✔ | ✔ | 1.0.0 |
| Seite | Nummer | 1 | Anfangsseitenindex | ✔ | ✔ | ✔ | 1.0.0 |
| Skala | Nummer | 1.0 | Sollte Minscale <= scale <= maxscale | ✔ | ✔ | ✔ | 1.0.0 |
| Minscale | Nummer | 1.0 | min -Skala | ✔ | ✔ | ✔ | 1.0.0 |
| Maxscale | Nummer | 3.0 | Maximale Skala | ✔ | ✔ | ✔ | 1.0.0 |
| horizontal | bool | FALSCH | Zeichnen Sie die Seitenrichtung. Wenn Sie die Orientierungsänderung hören möchten, können Sie [React-Native-Orientations-Locker] verwenden. | ✔ | ✔ | ✔ | 1.0.0 |
| ShowshorizontalsCrollindicator | bool | WAHR | zeigt oder verbirgt die horizontale Scroll -Stabansiedlung auf iOS | ✔ | 1.0.0 | ||
| ShowverticalScrollindicator | bool | WAHR | zeigt oder versteckt den vertikalen Scroll -Stabansiedler auf iOS | ✔ | 1.0.0 | ||
| fitpolicy | Nummer | 2 | 0: Anpassungsbreite, 1: Anpassungshöhe, 2: Anpassung beides (Standard) | ✔ | ✔ | ✔ | 1.0.0 |
| Abstand | Nummer | 10 | die Brechergröße zwischen den Seiten | ✔ | ✔ | ✔ | 1.0.0 |
| Passwort | Saite | "" " | PDF -Passwort, falls Passwordfehler, ruft onError () mit der Nachricht "Kennwort oder falsches Kennwort" auf. | ✔ | ✔ | ✔ | 1.0.0 |
| Stil | Objekt | {HintergrundColor: "#eee"} | Unterstützen Sie den normalen Ansichtsstil. Sie können dies verwenden, um die Farb-/Abstandsfarbe zu setzen ... | ✔ | ✔ | ✔ | 1.0.0 |
| Renderaktivitätsdindikator | (Fortschritt) => Komponente | Wenn Sie das Laden als Indikator anzeigen, können Sie Ihre Komponente verwenden | ✔ | ✔ | ✖ | 1.0.0 | |
| Enableantialiasing | bool | WAHR | Verbesserung des Renders ein wenig auf Bildschirmen mit niedrigen Auflösungen, aber vielleicht ein Problem auf Android 4.4. Fügen Sie also einen Schalter hinzu | ✖ | ✔ | ✖ | 1.0.0 |
| aktivieren | bool | FALSCH | Zeigen Sie nur eine Seite im Bildschirm an | ✔ | ✔ | ✔ | 1.0.0 |
| enablertl | bool | FALSCH | Scrollenseite als "Seite3, Seite 2, Seite1" | ✔ | ✖ | ✔ | 1.0.0 |
| EnableAnnotationRendering | bool | WAHR | Aktivieren Sie die Rendering -Annotation, beachten Sie: iOS unterstützen nur die erste Einstellung, unterstützen Sie keine Echtzeitveränderungen | ✔ | ✔ | ✖ | 1.0.0 |
| TrustAllCerts | bool | WAHR | Ermöglichen Sie Verbindungen zu Servern mit selbstsignierter Zertifizierung | ✔ | ✔ | ✖ | 1.0.0 |
| Singlepage | bool | FALSCH | Zeigen Sie nur die erste Seite an, nützlich für Miniaturansichten | ✔ | ✔ | ✔ | 1.0.0 |
| OnloadProgress | Funktion (Prozent) | NULL | Rückruf beim Laden, den Ladefortschritt zurückgeben (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| OnloadComplete | Funktion (numberOfpages, Pfad, {Breite, Höhe}, TablEcontents) | NULL | Rückruf, wenn PDF -Laden abgeschlossen ist, die Gesamtseite der Gesamtseite, PDF -Lokal-/Cache -Pfad, {Breite, Höhe} und Inhaltsverzeichnis | ✔ | ✔ | ✔ Aber ohne Tabellenstücken | 1.0.0 |
| Onpagechanged | Funktion (Seite, NummerOfpages) | NULL | Rückruf Wenn sich die Seite geändert hat, geben Sie die aktuelle Seite und die Gesamtseite zurück | ✔ | ✔ | ✔ | 1.0.0 |
| onError | Funktion (Fehler) | NULL | Rückruf, wenn Fehler aufgetreten sind | ✔ | ✔ | ✔ | 1.0.0 |
| onPagesingletap | Funktion (Seite) | NULL | Rückruf, wenn die Seite einzeln getippt war | ✔ | ✔ | ✔ | 1.0.0 |
| Onscalechanged | Funktion (Skala) | NULL | Rückruf, wenn Skalenseite | ✔ | ✔ | ✔ | 1.0.0 |
| Onpresslink | Funktion (URI) | NULL | Rückruf, wenn der Link getippt wurde | ✔ | ✔ | ✖ | 1.0.0 |
| Parameter | Beschreibung | Standard | iOS | Android | Fenster |
|---|---|---|---|---|---|
| Uri | PDF -Quelle, siehe das Variante für Details. | erforderlich | ✔ | ✔ | ✔ |
| Cache | Verwenden Sie Cache oder nicht | FALSCH | ✔ | ✔ | ✖ |
| Cachefilename | Spezifischer Dateiname für zwischengespeicherte PDF -Datei | MD5 (URI) Ergebnis | ✔ | ✔ | ✖ |
| Ablauf | Die Cache -Datei ist abgelaufen (0 ist nicht abgelaufen) | 0 | ✔ | ✔ | ✖ |
| Verfahren | Anforderungsmethode, wenn URI eine URL ist | "ERHALTEN" | ✔ | ✔ | ✖ |
| Header | Anfordern von Header, wenn URI eine URL ist | {} | ✔ | ✔ | ✖ |
| Verwendung | Beschreibung | iOS | Android | Fenster |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | Laden Sie PDF aus einer URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | Laden Sie PDF in Beziehung zur JS -Datei (müssen Sie nicht nach Xcode hinzufügen). | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Laden Sie PDF aus den Vermögenswerten, die Datei sollte sich unter Android/App/SRC/Main/Assets/Pfad/to/xxx.pdf befinden | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | Laden Sie PDF aus den Vermögenswerten. Sie müssen PDF zum projizierten projizieren. Dies unterstützt den Ordner nicht. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | Laden Sie PDF von der Base64 -Zeichenfolge | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | Laden Sie PDF aus dem lokalen Dateisystem | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | Laden Sie PDF mit UWP -App gebündelt | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | Laden Sie PDF aus Content URI | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | Laden Sie PDF aus der Blob -URL | ✖ | ✔ | ✖ |
*) Erfordert, mit diesem Patch React React React Native aus der Quelle
Methoden arbeiten mit einem REF zum PDF -Element. Sie können einen Schiedsrichter mit dem folgenden Code erhalten:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Stellen Sie die aktuelle Seite der PDF -Komponente ein. Pagenumber ist eine positive Ganzzahl. Wenn PageNumber> NummerOfPages, 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
