react native render pdf
v1.0.12
Высокая производительность и функция Rich React Native PDF View Component, написанный в OBJ-C ++ для iOS, Kotlin для Android и C ++ для Windows
В этом пакете мы используем react-native-blob-util блюб-уза.
В таблице ниже показаны поддерживаемые версии нативного React и реагируют-клино-блюб-утилита для различных версий
react-native-render-pdf.
| Реагировать на родной | 0,57+ |
|---|---|
| React-C-render-pdf | 1.0.0+ |
| Реактивно-блюб-уза | 0,13,7+ |
Expo: Этот пакет недоступен в приложении Expo Go. Узнайте, как вы можете использовать этот пакет в пользовательских клиентах DEV через плагин на конфигурации Expo Offe. Пример:
with-pdf.
# Using npm
npm install react-native-render-pdf react-native-blob-util --save
# or using yarn:
yarn add react-native-render-pdf react-native-blob-utilЗатем следуйте инструкциям для вашей платформы, чтобы связать реагирующий по-мощный-render-pdf в свой проект:
Отреагировать натив 0,60 и выше
Запустите pod install в каталоге ios . Связывание не требуется в React Native 0,60 и выше.
Отреагируйте нативные 0,59 и ниже
react-native link react-native-blob-util
react-native link react-native-render-pdf** Добавьте следующее в свой Android/Build.Gradle **
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}Если вы используете 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'
+ }
}Отреагировать натив 0,59,0 и ниже
react-native link react-native-blob-util
react-native link react-native-render-pdfwindowsyourapp.sln )node_modulesreact-native-render-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" /> .
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, если вы попадете в 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>
Android: see here
Q4 Почему это не работает с Native Expo React?.
A4 Expo не поддерживает родной модуль. Вы можете прочитать больше предостережений выставки here
Q5 Почему я не могу запустить пример iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Запустите следующие команды в папке Project (например, react-native-render-pdf/example ), чтобы убедиться, что все зависимости доступны:
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
[более]
/**
* Original Author: Wonday (@wonday.org) Copyright (c) 2017-present
* Copyright (c) 2024-present, Staxtech (@gidraphdanford.dev)
* 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-render-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 | Android | Окна | Скольжение |
|---|---|---|---|---|---|---|---|
| источник | объект | не нулевой | PDF -источник как {uri: xxx, кэш: false}. Смотрите следующее для деталей. | ✔ | ✔ | ✔ | 1.0.0 |
| страница | число | 1 | Первоначальный индекс страницы | ✔ | ✔ | ✔ | 1.0.0 |
| шкала | число | 1.0 | должен minscale <= Scale <= maxscale | ✔ | ✔ | ✔ | 1.0.0 |
| Minscale | число | 1.0 | Мин шкала | ✔ | ✔ | ✔ | 1.0.0 |
| MAXSCALE | число | 3.0 | максимальная шкала | ✔ | ✔ | ✔ | 1.0.0 |
| горизонтальный | буль | ЛОЖЬ | Нарисуйте направление страницы, если вы хотите прослушать изменение ориентации, вы можете использовать [React-Cniate-Onient-Locker] | ✔ | ✔ | ✔ | 1.0.0 |
| Showshorizontalscrollindicator | буль | истинный | Показывает или скрывает индикатор горизонтального прокрутки на iOS | ✔ | 1.0.0 | ||
| ShowerticalScrollindicator | буль | истинный | Показывает или скрывает индикатор вертикальной прокрутки на iOS | ✔ | 1.0.0 | ||
| Fitpolicy | число | 2 | 0: ширина подгонки, 1: высота подгонки, 2: подходит оба (по умолчанию) | ✔ | ✔ | ✔ | 1.0.0 |
| интервал | число | 10 | Размер выключателя между страницами | ✔ | ✔ | ✔ | 1.0.0 |
| пароль | нить | "" | PDF -пароль, если ошибка пароля будет вызовом onerror () с сообщением «требуется пароль или неправильный пароль». | ✔ | ✔ | ✔ | 1.0.0 |
| стиль | объект | {founalcolor: "#eee"} | Поддержите обычный стиль просмотра, вы можете использовать его для установки цвета границы/расстояния ... | ✔ | ✔ | ✔ | 1.0.0 |
| renderActivityIndicator | (Прогресс) => Компонент | При загрузке показать его в качестве индикатора, вы можете использовать свой компонент | ✔ | ✔ | ✖ | 1.0.0 | |
| EnableAntialiasing | буль | истинный | Улучшить рендеринг немного на экранах с низким разрешением, но, возможно, некоторая проблема на Android 4.4, поэтому добавьте переключатель | ✖ | ✔ | ✖ | 1.0.0 |
| EnablePaging | буль | ЛОЖЬ | Показать только одну страницу на экране | ✔ | ✔ | ✔ | 1.0.0 |
| eNablertl | буль | ЛОЖЬ | Страница прокрутки как "Page3, Page2, Page1" | ✔ | ✖ | ✔ | 1.0.0 |
| EnableAnnotationRendering | буль | истинный | Включить аннотацию рендеринга, уведомление: IOS поддерживает только начальные настройки, а не поддерживать изменение в реальном времени | ✔ | ✔ | ✖ | 1.0.0 |
| Доверие | буль | истинный | Разрешить соединения с серверами с самоподтвержденной сертификацией | ✔ | ✔ | ✖ | 1.0.0 |
| SinglePage | буль | ЛОЖЬ | Показать только первую страницу, полезно для просмотров миниатюр | ✔ | ✔ | ✔ | 1.0.0 |
| OnloadProgress | функция (процент) | нулевой | обратный вызов при загрузке, вернуть прогресс на загрузку (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| OnloadComplete | Функция (NumberOfPages, Path, {ширина, высота}, таблетки) | нулевой | обратный вызов при заполнении PDF, возврат общего количества страниц, PDF Local/Path Cache, {ширина, высота} и содержимое таблицы | ✔ | ✔ | ✔ но без столешниц | 1.0.0 |
| на пареги | Функция (страница, номер | нулевой | обратный вызов При изменении страницы, верните текущую страницу и общее количество страниц | ✔ | ✔ | ✔ | 1.0.0 |
| Onerror | функция (ошибка) | нулевой | обратный вызов, когда произошла ошибка | ✔ | ✔ | ✔ | 1.0.0 |
| OnPageingletap | функция (страница) | нулевой | обратный вызов, когда страница была одиночкой | ✔ | ✔ | ✔ | 1.0.0 |
| OnscaleChange | функция (масштаб) | нулевой | обратный вызов, когда масштабная страница | ✔ | ✔ | ✔ | 1.0.0 |
| Onpresslink | функция (URI) | нулевой | обратный вызов, когда ссылка нарезается | ✔ | ✔ | ✖ | 1.0.0 |
| параметр | Описание | по умолчанию | ios | Android | Окна |
|---|---|---|---|---|---|
| Ури | PDF -источник, см. Для детализации. | необходимый | ✔ | ✔ | ✔ |
| кеш | Используйте кэш или нет | ЛОЖЬ | ✔ | ✔ | ✖ |
| Cachefilename | конкретное имя файла для кэшированного файла PDF | MD5 (URI) результат | ✔ | ✔ | ✖ |
| срок годности | Файл кэша истек (0 не истекло) | 0 | ✔ | ✔ | ✖ |
| метод | Метод запроса, когда URI является URL | "ПОЛУЧАТЬ" | ✔ | ✔ | ✖ |
| заголовки | Запрашивание заголовков, когда URI является URL | {} | ✔ | ✔ | ✖ |
| Использование | Описание | ios | Android | Окна |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | загрузить PDF с URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | Загрузить PDF -файл Claint с файлом JS (не нужно добавлять xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | Загрузите PDF из активов, файл должен быть по адресу android/app/src/main/arsets/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 | ✖ | ✔ | ✖ |
*) Требуется строительство, реагирующее нативно из источника с этим патчем
Методы работают на ссылке на элемент 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
