react native pdf
v6.7.1
Komponen tampilan PDF asli reaksi (dukungan lintas platform)
Kami menggunakan react-native-blob-util untuk menangani akses sistem file dalam paket ini, Jadi Anda harus menginstal react-native-pdf dan react-native-blob-util
Tabel di bawah menunjukkan versi React Native dan react-native-blob-util yang didukung untuk berbagai versi
react-native-pdf.
| Bereaksi Asli | 0,4x - 0,56 | 0,57 | 0,60+ | 0,62+ | 0,62+ |
|---|---|---|---|---|---|
| reaksi-asli-pdf | 4.xx - 5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| reaksi-asli-blob-util | 0,13.7+ |
Expo: Paket ini tidak tersedia di aplikasi Expo Go. Pelajari bagaimana Anda dapat menggunakan paket ini di Klien Pengembang Khusus melalui Plugin Konfigurasi Expo di luar pohon. Contoh:
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-utilKemudian ikuti petunjuk platform Anda untuk menautkan react-native-pdf ke proyek Anda:
Bereaksi Asli 0.60 ke atas
Jalankan pod install di direktori ios . Penautan tidak diperlukan di React Native 0.60 ke atas.
Bereaksi Asli 0,59 dan di bawahnya
react-native link react-native-blob-util
react-native link react-native-pdfJika Anda menggunakan RN 0.59.0 ke atas , tambahkan yang berikut ke Android/app/build.gradle** Anda
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'
+ }
}Bereaksi Asli 0.59.0 dan di bawahnya
react-native link react-native-blob-util
react-native link react-native-pdfwindowsyourapp.sln )node_modulesreact-native-pdfwindowsRCTPdfRCTPdf.vcxprojnode_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxprojprogress-view dan di Proyek SolusiRCTPdf dan ReactNativeBlobUtilpch.h tambahkan #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp tambahkan PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); sebelum InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); dan PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Untuk menambahkan test.pdf seperti pada contoh, tambahkan:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
di file app .vcxproj , sebelum <None Include="packages.config" /> .
Q1. Setelah instalasi dan dijalankan, saya tidak dapat melihat file pdf.
A1: mungkin Anda lupa menjalankan react-native link atau tidak berjalan dengan benar. Anda dapat menambahkannya secara manual. Untuk detailnya Anda dapat melihat edisi #24 dan #2
Q2. Saat dijalankan, ini menunjukkan 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Versi react-native Anda terlalu lama, harap tingkatkan ke 0.47.0+ lihat juga #39
Q3. Saat saya menjalankan aplikasi contoh, saya mendapatkan layar putih/abu-abu/bilah pemuatan tidak berjalan.
A3. Periksa uri Anda, jika Anda menemukan pdf yang dihosting di http Anda perlu melakukan hal berikut:
iOS: tambahkan pengecualian untuk server yang menghosting pdf di ios info.plist . Berikut ini contohnya:
<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. mengapa ini tidak berfungsi dengan react native expo?.
A4. Expo tidak mendukung modul asli. Anda dapat membaca lebih banyak peringatan pameran here
Q5. Mengapa saya tidak dapat menjalankan contoh iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Jalankan perintah berikut di folder proyek (misalnya react-native-pdf/example ) untuk memastikan bahwa semua dependensi tersedia:
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 tertekan
v6.6.0 tertekan
v6.5.0
v6.4.0
v6.3.0
[lagi]
/**
* 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 ,
}
} ) ;| Milik | Jenis | Bawaan | Keterangan | iOS | Android | jendela | Rilis Pertama |
|---|---|---|---|---|---|---|---|
| sumber | obyek | bukan nol | Sumber PDF seperti {uri:xxx, cache:false}. lihat berikut ini untuk detailnya. | ✔ | ✔ | ✔ | <3.0 |
| halaman | nomor | 1 | indeks halaman awal | ✔ | ✔ | ✔ | <3.0 |
| skala | nomor | 1.0 | harus minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3.0 |
| skala kecil | nomor | 1.0 | skala minimal | ✔ | ✔ | ✔ | 5.0.5 |
| skala maksimal | nomor | 3.0 | skala maksimal | ✔ | ✔ | ✔ | 5.0.5 |
| horisontal | bodoh | PALSU | menggambar arah halaman, jika Anda ingin mendengarkan perubahan orientasi, Anda dapat menggunakan [react-native-orientation-locker] | ✔ | ✔ | ✔ | <3.0 |
| menunjukkanHorizontalScrollIndicator | bodoh | BENAR | menampilkan atau menyembunyikan indikator bilah gulir horizontal di iOS | ✔ | 6.6 | ||
| menunjukkanVerticalScrollIndicator | bodoh | BENAR | menampilkan atau menyembunyikan indikator bilah gulir vertikal di iOS | ✔ | 6.6 | ||
| gulirDiaktifkan | bodoh | BENAR | mengaktifkan atau menonaktifkan gulir | ✔ | 6.6 | ||
| fitLebar | bodoh | PALSU | jika true sesuai dengan lebar tampilan, tidak dapat menggunakan fitWidth=true bersama dengan skala | ✔ | ✔ | ✔ | <3.0, ditinggalkan dari 3.0 |
| fitPolicy | nomor | 2 | 0: lebar pas, 1: tinggi pas, 2: pas keduanya (default) | ✔ | ✔ | ✔ | 3.0 |
| jarak | nomor | 10 | ukuran pemutus antar halaman | ✔ | ✔ | ✔ | <3.0 |
| kata sandi | rangkaian | "" | kata sandi pdf, jika kata sandi salah, akan memanggil OnError() dengan pesan "Kata sandi diperlukan atau kata sandi salah." | ✔ | ✔ | ✔ | <3.0 |
| gaya | obyek | {warna latar:"#eee"} | mendukung gaya tampilan normal, Anda dapat menggunakan ini untuk mengatur warna batas/jarak... | ✔ | ✔ | ✔ | <3.0 |
| kemajuanContainerStyle | obyek | {warna latar:"#eee"} | mendukung gaya tampilan normal, Anda dapat menggunakan ini untuk mengatur warna batas/jarak... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndikator | (kemajuan) => Komponen | saat memuat, tunjukkan itu sebagai indikator, Anda dapat menggunakan komponen Anda | ✔ | ✔ | ✖ | <3.0 | |
| aktifkanAntialiasing | bodoh | BENAR | tingkatkan rendering sedikit pada layar beresolusi rendah, tapi mungkin ada masalah pada Android 4.4, jadi tambahkan tombol | ✖ | ✔ | ✖ | <3.0 |
| aktifkanPaging | bodoh | PALSU | hanya menampilkan satu halaman di layar | ✔ | ✔ | ✔ | 5.0.1 |
| aktifkanRTL | bodoh | PALSU | gulir halaman sebagai "halaman3, halaman2, halaman1" | ✔ | ✖ | ✔ | 5.0.1 |
| aktifkanAnnotationRendering | bodoh | BENAR | aktifkan anotasi rendering, perhatikan: iOS hanya mendukung pengaturan awal, tidak mendukung perubahan waktu nyata | ✔ | ✔ | ✖ | 5.0.3 |
| aktifkan DoubleTapZoom | bodoh | BENAR | Aktifkan gerakan ketuk dua kali untuk memperbesar | ✔ | ✔ | ✖ | 6.8.0 |
| percayaSemuaSertifikat | bodoh | BENAR | Izinkan koneksi ke server dengan sertifikasi yang ditandatangani sendiri | ✔ | ✔ | ✖ | 6.0.? |
| halaman tunggal | bodoh | PALSU | Hanya tampilkan halaman pertama, berguna untuk tampilan thumbnail | ✔ | ✔ | ✔ | 6.2.1 |
| diLoadProgress | fungsi (persen) | batal | panggilan balik saat memuat, mengembalikan kemajuan pemuatan (0-1) | ✔ | ✔ | ✖ | <3.0 |
| onLoadComplete | fungsi(numberOfPages, path, {width, height}, tableContents) | batal | panggilan balik ketika pemuatan pdf selesai, kembalikan jumlah halaman total, jalur lokal/cache pdf, {lebar, tinggi} dan daftar isi | ✔ | ✔ | ✔ tetapi tanpa tableContents | <3.0 |
| diPageChanged | fungsi (halaman, jumlah Halaman) | batal | panggilan balik ketika halaman diubah, kembalikan halaman saat ini dan jumlah halaman total | ✔ | ✔ | ✔ | <3.0 |
| diError | fungsi (kesalahan) | batal | panggilan balik ketika kesalahan terjadi | ✔ | ✔ | ✔ | <3.0 |
| diPageSingleTap | fungsi (halaman) | batal | panggilan balik ketika halaman disadap satu kali | ✔ | ✔ | ✔ | 3.0 |
| padaScaleChanged | fungsi (skala) | batal | panggilan balik saat skala halaman | ✔ | ✔ | ✔ | 3.0 |
| diPressLink | fungsi (uri) | batal | panggilan balik ketika tautan disadap | ✔ | ✔ | ✖ | 6.0.0 |
| parameter | Keterangan | bawaan | iOS | Android | jendela |
|---|---|---|---|---|---|
| uri | sumber pdf, lihat di bawah untuk detailnya. | diperlukan | ✔ | ✔ | ✔ |
| cache | menggunakan cache atau tidak | PALSU | ✔ | ✔ | ✖ |
| namafile cache | nama file tertentu untuk file pdf yang di-cache | Hasil SHA1(uri). | ✔ | ✔ | ✖ |
| kadaluwarsa | file cache kedaluwarsa detik (0 tidak kedaluwarsa) | 0 | ✔ | ✔ | ✖ |
| metode | metode permintaan ketika uri adalah url | "MENDAPATKAN" | ✔ | ✔ | ✖ |
| header | minta header ketika uri adalah url | {} | ✔ | ✔ | ✖ |
| Penggunaan | Keterangan | iOS | Android | jendela |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | memuat pdf dari url | ✔ | ✔ | ✔ |
{require("./test.pdf")} | memuat pdf terkait dengan file js (tidak perlu ditambahkan dengan xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | memuat pdf dari aset, file harus berada di android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | memuat pdf dari aset, Anda harus menambahkan pdf ke proyek dengan xcode. ini tidak mendukung folder. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | memuat pdf dari string base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | memuat pdf dari sistem file lokal | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | memuat pdf yang dibundel dengan aplikasi UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | memuat pdf dari URI konten | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | memuat pdf dari URL gumpalan | ✖ | ✔ | ✖ |
*) memerlukan pembuatan React Native dari sumber dengan patch ini
Metode beroperasi berdasarkan referensi ke elemen PDF. Anda bisa mendapatkan referensi dengan kode berikut:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Atur halaman komponen PDF saat ini. pageNumber adalah bilangan bulat positif. Jika pageNumber > numberOfPages, halaman saat ini tidak diubah.
Contoh:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
