react native pdf
v6.7.1
Реагирующий собственный компонент просмотра PDF (кросс-платформенная поддержка)
Мы используем react-native-blob-util для управления доступом к файловой системе в этом пакете, поэтому вам следует установить act-native-pdf и response-native-blob-util.
В таблице ниже показаны поддерживаемые версии React Native и React-native-blob-util для разных версий
react-native-pdf.
| Реагировать нативный | 0,4x - 0,56 | 0,57 | 0.60+ | 0.62+ | 0.62+ |
|---|---|---|---|---|---|
| реакция-родной-pdf | 4.хх - 5.0.х | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| реакция-native-blob-util | 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Затем следуйте инструкциям для вашей платформы, чтобы связать response-native-pdf с вашим проектом:
React Native 0.60 и выше
Запустите pod install в каталоге ios . Связывание не требуется в 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>
в файле приложения .vcxproj перед <None Include="packages.config" /> .
Вопрос 1. После установки и запуска не могу увидеть pdf файл.
A1: возможно, вы забыли выполнить react-native link или она работает неправильно. Вы можете добавить его вручную. Подробности вы можете посмотреть в выпуске #24 и #2
В2. При запуске он показывает, 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
А2. Ваша версия для реагирования слишком старая, обновите ее до 0.47.0+, см. также #39
Вопрос 3. Когда я запускаю пример приложения, я получаю белый/серый экран/полоса загрузки не прогрессирует.
А3. Проверьте свой URI. Если вы нажмете PDF-файл, размещенный на http вам нужно будет сделать следующее:
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
Вопрос 4. почему это не работает с React Native Expo?
А4. Expo не поддерживает собственный модуль. Вы можете прочитать больше предостережений по поводу выставки here
Вопрос 5. Почему я не могу запустить пример iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
А5. Запустите следующие команды в папке проекта (например, 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, кэш:false}. подробности см. ниже. | ✔ | ✔ | ✔ | <3,0 |
| страница | число | 1 | индекс начальной страницы | ✔ | ✔ | ✔ | <3,0 |
| шкала | число | 1.0 | должен minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3,0 |
| минмасштаб | число | 1.0 | минимальный масштаб | ✔ | ✔ | ✔ | 5.0.5 |
| МаксСкейл | число | 3.0 | максимальный масштаб | ✔ | ✔ | ✔ | 5.0.5 |
| горизонтальный | логическое значение | ЛОЖЬ | нарисуйте направление страницы, если вы хотите прослушать изменение ориентации, вы можете использовать [реагировать-native-orientation-locker] | ✔ | ✔ | ✔ | <3,0 |
| показываетHorizontalScrollIndicator | логическое значение | истинный | показывает или скрывает индикатор горизонтальной полосы прокрутки на iOS | ✔ | 6.6 | ||
| показываетVerticalScrollIndicator | логическое значение | истинный | показывает или скрывает индикатор вертикальной полосы прокрутки на iOS | ✔ | 6.6 | ||
| прокрутка включена | логическое значение | истинный | включить или отключить прокрутку | ✔ | 6.6 | ||
| FitWidth | логическое значение | ЛОЖЬ | если true соответствует ширине обзора, нельзя использовать fitWidth=true вместе с масштабом | ✔ | ✔ | ✔ | <3.0, отказ от версии 3.0 |
| fitPolicy | число | 2 | 0: по ширине, 1: по высоте, 2: по обеим сторонам (по умолчанию) | ✔ | ✔ | ✔ | 3.0 |
| расстояние | число | 10 | размер разделителя между страницами | ✔ | ✔ | ✔ | <3,0 |
| пароль | нить | "" | pdf-пароль, в случае ошибки пароля, будет вызван OnError() с сообщением «Требуется пароль или неверный пароль». | ✔ | ✔ | ✔ | <3,0 |
| стиль | объект | {backgroundColor:"#eee"} | поддерживает обычный стиль просмотра, вы можете использовать его для установки цвета границы/интервала... | ✔ | ✔ | ✔ | <3,0 |
| прогрессКонтейнерСтиль | объект | {backgroundColor:"#eee"} | поддерживает обычный стиль просмотра, вы можете использовать его для установки цвета границы/интервала... | ✔ | ✔ | ✔ | 6.9.0 |
| рендерактивитиндикатор | (прогресс) => Компонент | при загрузке показывать это как индикатор, вы можете использовать свой компонент | ✔ | ✔ | ✖ | <3,0 | |
| включить сглаживание | логическое значение | истинный | немного улучшить рендеринг на экранах с низким разрешением, но, возможно, на Android 4.4 есть проблемы, поэтому добавьте переключатель | ✖ | ✔ | ✖ | <3,0 |
| включить пейджинг | логическое значение | ЛОЖЬ | показывать только одну страницу на экране | ✔ | ✔ | ✔ | 5.0.1 |
| включитьRTL | логическое значение | ЛОЖЬ | прокручивать страницу как «страница3, страница2, страница1» | ✔ | ✖ | ✔ | 5.0.1 |
| включитьAnnotationRendering | логическое значение | истинный | включите аннотацию рендеринга, обратите внимание: iOS поддерживает только начальные настройки, но не поддерживает изменение в реальном времени. | ✔ | ✔ | ✖ | 5.0.3 |
| включитьDoubleTapZoom | логическое значение | истинный | Включить жест двойного касания для масштабирования | ✔ | ✔ | ✖ | 6.8.0 |
| довериеAllCerts | логическое значение | истинный | Разрешить подключения к серверам с самозаверяющей сертификацией | ✔ | ✔ | ✖ | 6.0.? |
| одностраничный | логическое значение | ЛОЖЬ | Показывать только первую страницу, полезно для просмотра миниатюр. | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | функция (проценты) | нулевой | обратный вызов при загрузке, возврат прогресса загрузки (0-1) | ✔ | ✔ | ✖ | <3,0 |
| onLoadComplete | функция (numberOfPages, путь, {ширина, высота}, tableContents) | нулевой | обратный вызов после завершения загрузки PDF-файла, возврат общего количества страниц, локального пути/кэша PDF-файла, {ширины, высоты} и оглавления. | ✔ | ✔ | ✔ но без таблицыСодержание | <3,0 |
| onPageChanged | функция (страница, количество страниц) | нулевой | обратный вызов при изменении страницы, возврат текущей страницы и общего количества страниц | ✔ | ✔ | ✔ | <3,0 |
| onError | функция (ошибка) | нулевой | обратный вызов при возникновении ошибки | ✔ | ✔ | ✔ | <3,0 |
| onPageSingleTap | функция (страница) | нулевой | обратный вызов при однократном нажатии на страницу | ✔ | ✔ | ✔ | 3.0 |
| onScaleChanged | функция (масштаб) | нулевой | обратный вызов при масштабировании страницы | ✔ | ✔ | ✔ | 3.0 |
| onPressLink | функция (ури) | нулевой | обратный вызов при нажатии на ссылку | ✔ | ✔ | ✖ | 6.0.0 |
| параметр | Описание | по умолчанию | iOS | Андроид | Окна |
|---|---|---|---|---|---|
| ури | Источник в формате pdf, подробности см. ниже. | необходимый | ✔ | ✔ | ✔ |
| кэш | использовать кеш или нет | ЛОЖЬ | ✔ | ✔ | ✖ |
| имя_кэш-файла | конкретное имя файла для кэшированного файла PDF | Результат SHA1(uri) | ✔ | ✔ | ✖ |
| истечение срока действия | срок действия кэш-файла истек (секунды) (0 не истек) | 0 | ✔ | ✔ | ✖ |
| метод | метод запроса, когда uri является URL-адресом | "ПОЛУЧАТЬ" | ✔ | ✔ | ✖ |
| заголовки | запрашивать заголовки, когда uri является URL-адресом | {} | ✔ | ✔ | ✖ |
| Использование | Описание | iOS | Андроид | Окна |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | загрузить PDF по URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | загрузить pdf, относящийся к файлу js (не нужно добавлять с помощью xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | загрузите PDF-файл из ресурсов, файл должен находиться по адресу android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | загрузить PDF-файл из ресурсов, вы должны добавить PDF-файл в проект с помощью xcode. это не поддерживает папку. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | загрузить pdf из строки base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | загрузить PDF из локальной файловой системы | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | загрузить PDF-файл в комплекте с приложением UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | загрузить PDF из URI контента | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | загрузить PDF-файл из URL-адреса BLOB-объекта | ✖ | ✔ | ✖ |
*) требуется сборка 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
