react native pdf
v6.7.1
반응형 기본 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 유틸리티 | 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를 프로젝트에 연결하세요.
리액트 네이티브 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>
<None Include="packages.config" /> 앞의 앱 .vcxproj 파일에서.
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 에서 호스팅되는 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. 왜 반응 네이티브 엑스포에서 작동하지 않습니까?.
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, 캐시: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 |
| 수평 스크롤 표시기 표시 | 부울 | 진실 | iOS에서 가로 스크롤 막대 표시기를 표시하거나 숨깁니다. | ✔ | 6.6 | ||
| 수직 스크롤 표시기 표시 | 부울 | 진실 | iOS에서 수직 스크롤 막대 표시기를 표시하거나 숨깁니다. | ✔ | 6.6 | ||
| 스크롤 활성화됨 | 부울 | 진실 | 스크롤 활성화 또는 비활성화 | ✔ | 6.6 | ||
| 적합 너비 | 부울 | 거짓 | true인 경우 뷰의 너비에 맞으면 scale과 함께 fitWidth=true를 사용할 수 없습니다. | ✔ | ✔ | ✔ | <3.0, 3.0에서 폐기됨 |
| 적합정책 | 숫자 | 2 | 0:너비 맞춤, 1:높이 맞춤, 2:둘 다 맞춤(기본값) | ✔ | ✔ | ✔ | 3.0 |
| 간격 | 숫자 | 10 | 페이지 사이의 차단기 크기 | ✔ | ✔ | ✔ | <3.0 |
| 비밀번호 | 끈 | "" | pdf 비밀번호, 비밀번호 오류가 있는 경우 "비밀번호가 필요하거나 잘못된 비밀번호입니다."라는 메시지와 함께 OnError()를 호출합니다. | ✔ | ✔ | ✔ | <3.0 |
| 스타일 | 물체 | {배경색상:"#eee"} | 일반 보기 스타일을 지원하면 이를 사용하여 테두리/간격 색상을 설정할 수 있습니다. | ✔ | ✔ | ✔ | <3.0 |
| 진행컨테이너 스타일 | 물체 | {배경색상:"#eee"} | 일반 보기 스타일을 지원하면 이를 사용하여 테두리/간격 색상을 설정할 수 있습니다. | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (진행) => 구성 요소 | 로드할 때 표시기로 표시하면 구성 요소를 사용할 수 있습니다. | ✔ | ✔ | ✖ | <3.0 | |
| 앤티앨리어싱 활성화 | 부울 | 진실 | 저해상도 화면에서는 렌더링이 약간 개선되지만 Android 4.4에서는 문제가 있을 수 있으므로 스위치를 추가하세요. | ✖ | ✔ | ✖ | <3.0 |
| 페이징 활성화 | 부울 | 거짓 | 화면에 한 페이지만 표시 | ✔ | ✔ | ✔ | 5.0.1 |
| 활성화RTL | 부울 | 거짓 | 페이지를 "page3, page2, page1"로 스크롤 | ✔ | ✖ | ✔ | 5.0.1 |
| 활성화AnnotationRendering | 부울 | 진실 | 렌더링 주석 활성화, 참고: iOS는 초기 설정만 지원하고 실시간 변경은 지원하지 않습니다. | ✔ | ✔ | ✖ | 5.0.3 |
| 활성화DoubleTapZoom | 부울 | 진실 | 두 번 탭하여 확대/축소 동작 활성화 | ✔ | ✔ | ✖ | 6.8.0 |
| trustAllCerts | 부울 | 진실 | 자체 서명된 인증을 사용하여 서버에 대한 연결 허용 | ✔ | ✔ | ✖ | 6.0.? |
| 단일 페이지 | 부울 | 거짓 | 첫 번째 페이지만 표시합니다. 썸네일 보기에 유용합니다. | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | 함수(퍼센트) | null | 로드 시 콜백, 로드 진행률 반환(0-1) | ✔ | ✔ | ✖ | <3.0 |
| onLoadComplete | 함수(numberOfPages, 경로, {너비, 높이}, tableContents) | null | PDF 로드 완료 시 콜백, 총 페이지 수, PDF 로컬/캐시 경로, {너비, 높이} 및 목차 반환 | ✔ | ✔ | ✔ 그러나 tableContents가 없음 | <3.0 |
| onPageChanged | 함수(페이지,페이지 수) | null | 페이지 변경 시 콜백, 현재 페이지 및 총 페이지 수 반환 | ✔ | ✔ | ✔ | <3.0 |
| 오류 시 | 기능(오류) | null | 오류 발생 시 콜백 | ✔ | ✔ | ✔ | <3.0 |
| onPageSingleTap | 기능(페이지) | null | 페이지를 한 번 탭했을 때의 콜백 | ✔ | ✔ | ✔ | 3.0 |
| 규모 변경됨 | 함수(규모) | null | 페이지 크기 조정 시 콜백 | ✔ | ✔ | ✔ | 3.0 |
| 온프레스링크 | 함수(uri) | null | 링크 탭 시 콜백 | ✔ | ✔ | ✖ | 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는 양의 정수입니다. pageNumber > numberOfPages이면 현재 페이지가 변경되지 않습니다.
예:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
