react native pdf
v6.7.1
React ネイティブ PDF ビュー コンポーネント (クロスプラットフォーム サポート)
このパッケージではファイル システム アクセスを処理するためにreact-native-blob-util使用します。そのため、react-native-pdfとreact-native-blob-utilをインストールする必要があります。
以下の表は、サポートされる React Native のバージョンと、
react-native-pdfのさまざまなバージョンでの 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+ |
| 反応ネイティブブロブユーティリティ | 0.13.7+ |
Expo: このパッケージは Expo Go アプリでは利用できません。ツリー外の Expo Config プラグインを介してカスタム開発クライアントでこのパッケージを使用する方法を学びます。例:
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-pdfRN 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.vcxprojを追加します。node_modulesreact-native-blob-utilwindowsReactNativeBlobUtilReactNativeBlobUtil.vcxprojを追加します。progress-viewを選択しますRCTPdfとReactNativeBlobUtilも選択しますpch.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.反応ネイティブのバージョンが古すぎます。0.47.0 以降にアップグレードしてください。 #39も参照してください。
Q3.サンプル アプリを実行すると、白/灰色の画面が表示され、読み込みバーが進みません。
A3. URI を確認してください。http でhttpされている PDF にアクセスした場合は、次の操作を行う必要があります。
iOS: PDF をホストするサーバーの例外を ios info.plistに追加します。以下に例を示します。
<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.なぜ反応ネイティブ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 | アンドロイド | 窓 | 最初のリリース |
|---|---|---|---|---|---|---|---|
| ソース | 物体 | nullではない | {uri:xxx、cache:false} のような PDF ソース。詳細については、以下を参照してください。 | ✔ | ✔ | ✔ | <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 |
| showHorizonScrollIndicator | ブール | 真実 | iOS の水平スクロール バー インジケーターを表示または非表示にします | ✔ | 6.6 | ||
| showVerticalScrollIndicator | ブール | 真実 | iOS の垂直スクロール バー インジケーターを表示または非表示にします | ✔ | 6.6 | ||
| スクロール有効 | ブール | 真実 | スクロールを有効または無効にする | ✔ | 6.6 | ||
| フィット幅 | ブール | 間違い | true の場合、ビューの幅に合わせます。fitWidth=true をスケールと一緒に使用することはできません | ✔ | ✔ | ✔ | 3.0 未満、3.0 から廃止 |
| フィットポリシー | 番号 | 2 | 0:幅に合わせる、1:高さに合わせる、2:両方に合わせる(デフォルト) | ✔ | ✔ | ✔ | 3.0 |
| 間隔 | 番号 | 10 | ページ間のブレーカーのサイズ | ✔ | ✔ | ✔ | <3.0 |
| パスワード | 弦 | 「」 | pdf パスワードは、パスワード エラーの場合、OnError() を呼び出し、「パスワードが必要か、パスワードが正しくありません」というメッセージを表示します。 | ✔ | ✔ | ✔ | <3.0 |
| スタイル | 物体 | {backgroundColor:"#eee"} | 通常の表示スタイルをサポートしています。これを使用して境界線/間隔の色を設定できます... | ✔ | ✔ | ✔ | <3.0 |
| progressContainerStyle | 物体 | {backgroundColor:"#eee"} | 通常の表示スタイルをサポートしています。これを使用して境界線/間隔の色を設定できます... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (進捗) => コンポーネント | ロード時にインジケーターとして表示すると、コンポーネントを使用できます | ✔ | ✔ | ✖ | <3.0 | |
| アンチエイリアスを有効にする | ブール | 真実 | 低解像度画面でのレンダリングが少し改善されましたが、Android 4.4 ではもちろん問題が発生する可能性があるため、スイッチを追加してください | ✖ | ✔ | ✖ | <3.0 |
| イネーブルページング | ブール | 間違い | 画面に 1 ページだけを表示する | ✔ | ✔ | ✔ | 5.0.1 |
| RTL を有効にする | ブール | 間違い | ページを「page3、page2、page1」としてスクロールします | ✔ | ✖ | ✔ | 5.0.1 |
| 注釈レンダリングを有効にする | ブール | 真実 | 注釈のレンダリングを有効にします。注意: iOS は初期設定のみをサポートし、リアルタイムの変更はサポートしません。 | ✔ | ✔ | ✖ | 5.0.3 |
| ダブルタップズームを有効にする | ブール | 真実 | ダブルタップによるズームジェスチャを有効にする | ✔ | ✔ | ✖ | 6.8.0 |
| すべての証明書を信頼する | ブール | 真実 | 自己署名証明書を持つサーバーへの接続を許可する | ✔ | ✔ | ✖ | 6.0.? |
| シングルページ | ブール | 間違い | 最初のページのみを表示、サムネイル表示に便利 | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | 関数(パーセント) | ヌル | ロード時のコールバック、ロードの進行状況 (0 ～ 1) を返す | ✔ | ✔ | ✖ | <3.0 |
| onLoadComplete | function(ページ数, パス, {幅, 高さ}, tableContents) | ヌル | PDF の読み込みが完了したときのコールバック、総ページ数、PDF ローカル/キャッシュ パス、{幅,高さ}、および目次を返す | ✔ | ✔ | ✔ ただし、tableContents はありません | <3.0 |
| onPageChanged | 関数(ページ,ページ数) | ヌル | ページが変更されたときのコールバック、現在のページと総ページ数を返す | ✔ | ✔ | ✔ | <3.0 |
| onError | 関数(エラー) | ヌル | エラー発生時のコールバック | ✔ | ✔ | ✔ | <3.0 |
| onPageシングルタップ | 機能(ページ) | ヌル | ページがシングルタップされたときのコールバック | ✔ | ✔ | ✔ | 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 要素への参照を操作します。次のコードで ref を取得できます。
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
PDF コンポーネントの現在のページを設定します。 pageNumber は正の整数です。 pageNumber >numberOfPages の場合、現在のページは変更されません。
例：
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
