react native pdf
v6.7.1
一個React原生PDF視圖元件（跨平台支援）
我們使用react-native-blob-util來處理這個套件中的檔案系統訪問，所以你應該安裝react-native-pdf和react-native-blob-util
下表顯示了不同版本的
react-native-pdf支援的React Native和react-native-blob-util版本。
| 反應本機 | 0.4x - 0.56 | 0.57 | 0.60+ | 0.62+ | 0.62+ |
|---|---|---|---|---|---|
| 反應本機 pdf | 4.xx - 5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| 反應本機 blob-util | 0.13.7+ |
Expo：Expo Go 應用程式中不提供此套餐。了解如何透過樹外 Expo 設定插件在自訂開發用戶端中使用此套件。範例：
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-util然後按照您的平台的說明將react-native-pdf連結到您的專案中：
React Native 0.60 以上
在ios目錄中運行pod install 。 React Native 0.60 以上版本不需要連結。
React Native 0.59 及以下版本
react-native link react-native-blob-util
react-native link react-native-pdf如果您使用 RN 0.59.0 及更高版本，請將以下內容新增至您的 android/app/build.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'
+ }
}React Native 0.59.0 及以下版本
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並在解決方案專案中RCTPdf和ReactNativeBlobUtilpch.h中加入#include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp中加入PackageProviders().Append(winrt::progress_view::ReactPackageProvider());在InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider());和PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); 若要新增test.pdf如範例所示，請新增：
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
在 app .vcxproj檔案中的<None Include="packages.config" />之前。
Q1.安裝並運行後，我看不到pdf檔。
A1：也許你忘記執行react-native link或它沒有正確運行。您可以手動新增。有關詳細信息，您可以查看問題#24和#2
Q2。運行時，它顯示'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2。您的react-native版本太舊，請將其升級到0.47.0+另請參閱#39
Q3。當我運行範例應用程式時，我看到白色/灰色螢幕/載入欄沒有進度。
A3。檢查您的 uri，如果您點擊http上託管的 pdf，則需要執行以下操作：
iOS：在 ios info.plist中為託管 pdf 的伺服器新增例外。這是一個例子：
<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>
安卓： see here
Q4。為什麼它不能與 React Native Expo 一起使用？
A4。 Expo 不支援本機模組。您可以here閱讀更多世博會注意事項
Q5.為什麼我無法運行 iOS 範例？ 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5。在專案資料夾（例如react-native-pdf/example ）中執行以下命令以確保所有依賴項均可用：
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 鬱悶
v6.6.0 鬱悶
v6.5.0
v6.4.0
v6.3.0
[更多的]
/**
* 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 ,
}
} ) ;| 財產 | 類型 | 預設 | 描述 | iOS系統 | 安卓 | 視窗 | 首次發布 |
|---|---|---|---|---|---|---|---|
| 來源 | 目的 | 不為空 | PDF 來源，如 {uri:xxx, cache:false}。詳細內容請參考下文。 | ✔ | ✔ | ✔ | <3.0 |
| 頁 | 數位 | 1 | 初始頁面索引 | ✔ | ✔ | ✔ | <3.0 |
| 規模 | 數位 | 1.0 | 應該 minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3.0 |
| 最小尺度 | 數位 | 1.0 | 最小刻度 | ✔ | ✔ | ✔ | 5.0.5 |
| 最大尺度 | 數位 | 3.0 | 最大規模 | ✔ | ✔ | ✔ | 5.0.5 |
| 水平的 | 布林值 | 錯誤的 | 繪製頁面方向，如果你想監聽方向變化，可以使用 [react-native-orientation-locker] | ✔ | ✔ | ✔ | <3.0 |
| 顯示水平捲動指示器 | 布林值 | 真的 | 在 iOS 上顯示或隱藏水平捲軸指示器 | ✔ | 6.6 | ||
| 顯示垂直捲動指示器 | 布林值 | 真的 | 在 iOS 上顯示或隱藏垂直捲軸指示器 | ✔ | 6.6 | ||
| 滾動啟用 | 布林值 | 真的 | 啟用或停用滾動 | ✔ | 6.6 | ||
| 適合寬度 | 布林值 | 錯誤的 | 如果true適合視圖的寬度，則無法將fitWidth=true與scale一起使用 | ✔ | ✔ | ✔ | <3.0，從3.0開始被放棄 |
| 適合政策 | 數位 | 2 | 0：適合寬度，1：適合高度，2：適合兩者（預設） | ✔ | ✔ | ✔ | 3.0 |
| 間距 | 數位 | 10 | 頁面之間的斷路器尺寸 | ✔ | ✔ | ✔ | <3.0 |
| 密碼 | 細繩 | ”” | pdf 密碼，如果密碼錯誤，將呼叫 OnError() 並顯示訊息「需要密碼或密碼不正確」。 | ✔ | ✔ | ✔ | <3.0 |
| 風格 | 目的 | {背景顏色："#eee"} | 支援普通視圖樣式，您可以使用它來設定邊框/間距顏色... | ✔ | ✔ | ✔ | <3.0 |
| 進度容器樣式 | 目的 | {背景顏色："#eee"} | 支援普通視圖樣式，您可以使用它來設定邊框/間距顏色... | ✔ | ✔ | ✔ | 6.9.0 |
| 渲染活動指示器 | （進度）=> 組件 | 加載時將其顯示為指示器，您可以使用您的組件 | ✔ | ✔ | ✖ | <3.0 | |
| 啟用抗鋸齒 | 布林值 | 真的 | 改善了低解析度螢幕上的渲染效果，但在 Android 4.4 上可能會出現一些問題，因此添加一個開關 | ✖ | ✔ | ✖ | <3.0 |
| 啟用分頁 | 布林值 | 錯誤的 | 螢幕上僅顯示一頁 | ✔ | ✔ | ✔ | 5.0.1 |
| 啟用RTL | 布林值 | 錯誤的 | 捲動頁為“第3頁，第2頁，第1頁” | ✔ | ✖ | ✔ | 5.0.1 |
| 啟用註釋渲染 | 布林值 | 真的 | 啟用渲染註釋，注意：iOS僅支援初始設置，不支援即時更改 | ✔ | ✔ | ✖ | 5.0.3 |
| 啟用雙擊縮放 | 布林值 | 真的 | 啟用雙擊縮放手勢 | ✔ | ✔ | ✖ | 6.8.0 |
| 信任所有憑證 | 布林值 | 真的 | 允許連接到具有自簽名認證的伺服器 | ✔ | ✔ | ✖ | 6.0。 |
| 單頁 | 布林值 | 錯誤的 | 僅顯示第一頁，對於縮圖視圖很有用 | ✔ | ✔ | ✔ | 6.2.1 |
| 載入進度 | 函數（百分比） | 無效的 | 載入時回調，返回載入進度（0-1） | ✔ | ✔ | ✖ | <3.0 |
| 載入完成時 | 函數（頁數，路徑，{寬度，高度}，表格內容） | 無效的 | pdf載入完成時的回調，傳回總頁數，pdf本地/快取路徑，{寬度，高度}和目錄 | ✔ | ✔ | ✔ 但沒有表格內容 | <3.0 |
| 頁面更改 | 函數（頁，頁數） | 無效的 | 頁面改變時回調，返回目前頁數和總頁數 | ✔ | ✔ | ✔ | <3.0 |
| 錯誤時 | 函數（錯誤） | 無效的 | 發生錯誤時的回調 | ✔ | ✔ | ✔ | <3.0 |
| 頁面點擊 | 功能（頁） | 無效的 | 點擊頁面時的回調 | ✔ | ✔ | ✔ | 3.0 |
| 規模改變 | 函數（尺度） | 無效的 | 縮放頁面時的回調 | ✔ | ✔ | ✔ | 3.0 |
| 新聞連結 | 函數（uri） | 無效的 | 點擊連結時的回調 | ✔ | ✔ | ✖ | 6.0.0 |
| 範圍 | 描述 | 預設 | iOS系統 | 安卓 | 視窗 |
|---|---|---|---|---|---|
| 烏裡 | pdf源碼，詳細見下文。 | 必需的 | ✔ | ✔ | ✔ |
| 快取 | 是否使用快取 | 錯誤的 | ✔ | ✔ | ✖ |
| 快取檔案名 | 快取 pdf 檔案的特定檔案名 | SHA1(uri) 結果 | ✔ | ✔ | ✖ |
| 過期 | 快取檔案過期秒數（0未過期） | 0 | ✔ | ✔ | ✖ |
| 方法 | uri為url時的請求方法 | 「得到」 | ✔ | ✔ | ✖ |
| 標頭 | 當 uri 是 url 時請求標頭 | {} | ✔ | ✔ | ✖ |
| 用法 | 描述 | iOS系統 | 安卓 | 視窗 |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | 從 url 加載 pdf | ✔ | ✔ | ✔ |
{require("./test.pdf")} | 載入與js檔案相關的pdf（不需要透過xcode添加） | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | 從資產載入pdf，檔案應位於android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | 從資源載入pdf，您必須透過xcode將pdf新增至專案。這不支援資料夾。 | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | 從base64字串載入pdf | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | 從本機檔案系統載入pdf | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | 載入與 UWP 應用程式捆綁的 pdf | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | 從內容 URI 載入 pdf | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | 從 blob URL 載入 pdf | ✖ | ✔ | ✖ |
*) 需要使用此補丁從原始程式碼建立 React Native
方法對 PDF 元素的參考進行操作。您可以使用以下程式碼取得參考：
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
設定 PDF 組件的目前頁面。頁碼是一個正整數。如果 pageNumber > numberOfPages，則目前頁不變更。
例子：
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
