react native pdf
v6.7.1
Un componente de vista de PDF nativo de reacción (soporte multiplataforma)
Usamos react-native-blob-util para manejar el acceso al sistema de archivos en este paquete, por lo que debe instalar reaccionar-native-pdf y reaccionar-native-blob-util
La siguiente tabla muestra las versiones compatibles de React Native y react-native-blob-util para diferentes versiones de
react-native-pdf.
| Reaccionar nativo | 0,4x - 0,56 | 0,57 | 0,60+ | 0,62+ | 0,62+ |
|---|---|---|---|---|---|
| reaccionar-nativo-pdf | 4.xx-5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| reaccionar-nativo-blob-util | 0.13.7+ |
Expo: este paquete no está disponible en la aplicación Expo Go. Descubra cómo puede utilizar este paquete en clientes de desarrollo personalizados a través del complemento Expo Config fuera del árbol. Ejemplo:
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-utilLuego siga las instrucciones de su plataforma para vincular react-native-pdf a su proyecto:
Reaccionar nativo 0.60 y superior
Ejecute pod install en el directorio ios . No es necesario vincular en React Native 0.60 y versiones posteriores.
Reaccionar nativo 0.59 y por debajo
react-native link react-native-blob-util
react-native link react-native-pdfSi usa RN 0.59.0 y superior , agregue lo siguiente a su 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'
+ }
}Reaccionar nativo 0.59.0 y anteriores
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 y en Proyectos de soluciónRCTPdf y ReactNativeBlobUtilpch.h agregue #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp agregue PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); antes de InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); y PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Para agregar un test.pdf como en el ejemplo, agregue:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
en el archivo .vcxproj de la aplicación, antes de <None Include="packages.config" /> .
P1. Después de la instalación y ejecución, no puedo ver el archivo pdf.
R1: tal vez olvidó ejecutar react-native link o no se ejecuta correctamente. Puedes agregarlo manualmente. Para más detalles puedes ver los números #24 y #2
P2. Cuando se ejecuta, muestra 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Su versión nativa de reacción es demasiado antigua; actualícela a 0.47.0+; consulte también #39
P3. Cuando ejecuto la aplicación de ejemplo aparece una pantalla blanca/gris/la barra de carga no avanza.
A3. Verifique su uri, si encuentra un pdf alojado en un http deberá hacer lo siguiente:
iOS: agregue una excepción para el servidor que aloja el pdf en ios info.plist . Aquí hay un ejemplo:
<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
P4. ¿Por qué no funciona con reaccionar expo nativa?
A4. Expo no es compatible con el módulo nativo. Puedes leer más advertencias de la exposición here
P5. ¿Por qué no puedo ejecutar el ejemplo de iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Ejecute los siguientes comandos en la carpeta del proyecto (por ejemplo, react-native-pdf/example ) para asegurarse de que todas las dependencias estén disponibles:
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 deprimido
v6.6.0 deprimido
v6.5.0
v6.4.0
v6.3.0
[más]
/**
* 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 ,
}
} ) ;| Propiedad | Tipo | Por defecto | Descripción | iOS | Androide | ventanas | Primer lanzamiento |
|---|---|---|---|---|---|---|---|
| fuente | objeto | no nulo | Fuente PDF como {uri:xxx, cache:false}. consulte lo siguiente para obtener más detalles. | ✔ | ✔ | ✔ | <3.0 |
| página | número | 1 | índice de la página inicial | ✔ | ✔ | ✔ | <3.0 |
| escala | número | 1.0 | debería minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3.0 |
| escala mínima | número | 1.0 | escala mínima | ✔ | ✔ | ✔ | 5.0.5 |
| escala máxima | número | 3.0 | escala máxima | ✔ | ✔ | ✔ | 5.0.5 |
| horizontal | booleano | FALSO | dibuje la dirección de la página, si desea escuchar el cambio de orientación, puede usar [react-native-orientation-locker] | ✔ | ✔ | ✔ | <3.0 |
| muestraHorizontalScrollIndicator | booleano | verdadero | muestra u oculta el indicador de la barra de desplazamiento horizontal en iOS | ✔ | 6.6 | ||
| muestraVerticalScrollIndicator | booleano | verdadero | muestra u oculta el indicador de la barra de desplazamiento vertical en iOS | ✔ | 6.6 | ||
| desplazamiento habilitado | booleano | verdadero | habilitar o deshabilitar el desplazamiento | ✔ | 6.6 | ||
| ajusteAncho | booleano | FALSO | Si es verdadero, se ajusta al ancho de la vista, no se puede usar fitWidth=true junto con la escala. | ✔ | ✔ | ✔ | <3.0, abandonado desde 3.0 |
| política de ajuste | número | 2 | 0: ajustar ancho, 1: ajustar altura, 2: ajustar ambos (predeterminado) | ✔ | ✔ | ✔ | 3.0 |
| espaciado | número | 10 | el tamaño del disyuntor entre páginas | ✔ | ✔ | ✔ | <3.0 |
| contraseña | cadena | "" | contraseña pdf, si hay un error en la contraseña, llamará a OnError() con el mensaje "Contraseña requerida o contraseña incorrecta". | ✔ | ✔ | ✔ | <3.0 |
| estilo | objeto | {color de fondo: "#eee"} | admite el estilo de vista normal, puede usarlo para establecer el color del borde/espaciado... | ✔ | ✔ | ✔ | <3.0 |
| progresoContenedorEstilo | objeto | {color de fondo: "#eee"} | admite el estilo de vista normal, puede usarlo para establecer el color del borde/espaciado... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (progreso) => Componente | al cargarlo muéstralo como indicador, puedes usar tu componente | ✔ | ✔ | ✖ | <3.0 | |
| habilitar Antialiasing | booleano | verdadero | mejorar un poco el renderizado en pantallas de baja resolución, pero tal vez haya algún problema en Android 4.4, así que agregue un interruptor | ✖ | ✔ | ✖ | <3.0 |
| habilitar paginación | booleano | FALSO | solo muestra una página en la pantalla | ✔ | ✔ | ✔ | 5.0.1 |
| habilitarRTL | booleano | FALSO | desplazarse por la página como "página3, página2, página1" | ✔ | ✖ | ✔ | 5.0.1 |
| enableAnnotationRendering | booleano | verdadero | habilite la anotación de representación, aviso: iOS solo admite la configuración inicial, no admite cambios en tiempo real | ✔ | ✔ | ✖ | 5.0.3 |
| habilitarDoubleTapZoom | booleano | verdadero | Habilitar gesto de doble toque para hacer zoom | ✔ | ✔ | ✖ | 6.8.0 |
| confianzaTodos los certificados | booleano | verdadero | Permitir conexiones a servidores con certificación autofirmada | ✔ | ✔ | ✖ | 6.0.? |
| página única | booleano | FALSO | Mostrar solo la primera página, útil para vistas en miniatura | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | función (porcentaje) | nulo | devolución de llamada al cargar, devolver el progreso de la carga (0-1) | ✔ | ✔ | ✖ | <3.0 |
| en carga completa | función (número de páginas, ruta, {ancho, alto}, contenido de la tabla) | nulo | devolución de llamada cuando se completa la carga del pdf, devolución del recuento total de páginas, ruta local/caché del pdf, {ancho, alto} y tabla de contenido | ✔ | ✔ | ✔ pero sin contenido de tabla | <3.0 |
| en la página cambiado | función (página, número de páginas) | nulo | devolución de llamada cuando se cambia la página, devolver la página actual y el recuento total de páginas | ✔ | ✔ | ✔ | <3.0 |
| enError | función (error) | nulo | devolución de llamada cuando ocurrió el error | ✔ | ✔ | ✔ | <3.0 |
| onPageSingleTap | función (página) | nulo | devolución de llamada cuando se tocó una vez la página | ✔ | ✔ | ✔ | 3.0 |
| onScaleChanged | función (escala) | nulo | devolución de llamada cuando escalar página | ✔ | ✔ | ✔ | 3.0 |
| enPressLink | función (uri) | nulo | devolución de llamada cuando se toca el enlace | ✔ | ✔ | ✖ | 6.0.0 |
| parámetro | Descripción | por defecto | iOS | Androide | ventanas |
|---|---|---|---|---|---|
| uri | fuente en pdf, consulte lo siguiente para obtener más detalles. | requerido | ✔ | ✔ | ✔ |
| cache | usar caché o no | FALSO | ✔ | ✔ | ✖ |
| nombre de archivo de caché | nombre de archivo específico para el archivo pdf en caché | Resultado SHA1(uri) | ✔ | ✔ | ✖ |
| vencimiento | el archivo de caché expiró en segundos (0 no está vencido) | 0 | ✔ | ✔ | ✖ |
| método | método de solicitud cuando uri es una URL | "CONSEGUIR" | ✔ | ✔ | ✖ |
| encabezados | solicitar encabezados cuando uri es una URL | {} | ✔ | ✔ | ✖ |
| Uso | Descripción | iOS | Androide | ventanas |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | cargar pdf desde una URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | cargar pdf relacionado con el archivo js (no es necesario agregarlo mediante xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | cargue el pdf desde los activos, el archivo debe estar en android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | cargue pdf desde activos, debe agregar pdf al proyecto mediante xcode. esto no es compatible con la carpeta. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | cargar pdf desde una cadena base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | cargar pdf desde el sistema de archivos local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | cargar pdf incluido con la aplicación para UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | cargar pdf desde el URI de contenido | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | cargar pdf desde la URL del blob | ✖ | ✔ | ✖ |
*) requiere compilar React Native desde el código fuente con este parche
Los métodos operan con una referencia al elemento PDF. Puede obtener una referencia con el siguiente código:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Establezca la página actual del componente PDF. pageNumber es un número entero positivo. Si pageNumber > numberOfPages, la página actual no cambia.
Ejemplo:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
