react native pdf
v6.7.1
Um componente de visualização de PDF nativo do React (suporte multiplataforma)
Usamos react-native-blob-util para lidar com o acesso ao sistema de arquivos neste pacote. Portanto, você deve instalar react-native-pdf e react-native-blob-util
A tabela abaixo mostra as versões suportadas de React Native e react-native-blob-util para diferentes versões de
react-native-pdf.
| Reagir nativo | 0,4x - 0,56 | 0,57 | 0,60+ | 0,62+ | 0,62+ |
|---|---|---|---|---|---|
| reagir-nativo-pdf | 4.xx - 5.0.x | 5.0.9+ | 6.0.0+ | 6.2.0+ | 6.4.0+ |
| reagir-nativo-blob-util | 0,13,7+ |
Expo: Este pacote não está disponível no aplicativo Expo Go. Aprenda como você pode usar este pacote em clientes de desenvolvimento personalizados por meio do plug-in Expo Config fora da árvore. Exemplo:
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-utilEm seguida, siga as instruções da sua plataforma para vincular o react-native-pdf ao seu projeto:
React Native 0,60 e superior
Execute pod install no diretório ios . A vinculação não é necessária no React Native 0.60 e superior.
React Native 0,59 e abaixo
react-native link react-native-blob-util
react-native link react-native-pdfSe você usa RN 0.59.0 e superior , adicione o seguinte ao seu 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 e abaixo
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 e em Projetos de SoluçãoRCTPdf e ReactNativeBlobUtilpch.h adicione #include "winrt/RCTPdf.h"#include "winrt/ReactNativeBlobUtil.h"App.cpp adicione PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); antes de InitializeComponent();PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); e PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider()); Para adicionar um test.pdf como no exemplo, adicione:
<None Include="....test.pdf">
<DeploymentContent>true</DeploymentContent>
</None>
no arquivo app .vcxproj , antes de <None Include="packages.config" /> .
Q1. Após a instalação e execução, não consigo ver o arquivo pdf.
A1: talvez você tenha esquecido de executar react-native link ou ele não funciona corretamente. Você pode adicioná-lo manualmente. Para detalhes você pode ver as edições #24 e #2
Q2. Ao executar, mostra que 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Sua versão react-native é muito antiga, atualize-a para 0.47.0+, veja também #39
Q3. Quando executo o aplicativo de exemplo, recebo uma tela branca/cinza/a barra de carregamento não está progredindo.
A3. Verifique seu uri, se você acessar um pdf hospedado em um http precisará fazer o seguinte:
iOS: adicione uma exceção para o servidor que hospeda o pdf no ios info.plist . Aqui está um exemplo:
<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. por que não funciona com react native expo?
A4. Expo não suporta módulo nativo. você pode ler mais advertências da exposição here
Q5. Por que não consigo executar o exemplo do iOS? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Execute os seguintes comandos na pasta do projeto (por exemplo, react-native-pdf/example ) para garantir que todas as dependências estejam disponíveis:
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
[mais]
/**
* 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 ,
}
} ) ;| Propriedade | Tipo | Padrão | Descrição | iOS | Android | Windows | Primeiro lançamento |
|---|---|---|---|---|---|---|---|
| fonte | objeto | não nulo | Fonte PDF como {uri:xxx, cache:false}. veja o seguinte para detalhes. | ✔ | ✔ | ✔ | <3,0 |
| página | número | 1 | índice da página inicial | ✔ | ✔ | ✔ | <3,0 |
| escala | número | 1,0 | deveria minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3,0 |
| escala mínima | número | 1,0 | escala mínima | ✔ | ✔ | ✔ | 5.0.5 |
| escalamáx | número | 3,0 | escala máxima | ✔ | ✔ | ✔ | 5.0.5 |
| horizontal | bool | falso | desenhe a direção da página, se quiser ouvir a mudança de orientação, você pode usar [react-native-orientation-locker] | ✔ | ✔ | ✔ | <3,0 |
| mostraHorizontalScrollIndicator | bool | verdadeiro | mostra ou oculta o indicador da barra de rolagem horizontal no iOS | ✔ | 6.6 | ||
| mostraVerticalScrollIndicator | bool | verdadeiro | mostra ou oculta o indicador da barra de rolagem vertical no iOS | ✔ | 6.6 | ||
| scrollEnabled | bool | verdadeiro | ativar ou desativar a rolagem | ✔ | 6.6 | ||
| ajusteLargura | bool | falso | se true se ajustar à largura da visualização, não será possível usar fitWidth=true junto com a escala | ✔ | ✔ | ✔ | <3,0, abandonado a partir de 3,0 |
| política de ajuste | número | 2 | 0:ajustar largura, 1:ajustar altura, 2:ajustar ambos (padrão) | ✔ | ✔ | ✔ | 3,0 |
| espaçamento | número | 10 | o tamanho do disjuntor entre as páginas | ✔ | ✔ | ✔ | <3,0 |
| senha | corda | "" | pdf password, se houver erro de senha, chamará OnError() com a mensagem "Senha necessária ou senha incorreta." | ✔ | ✔ | ✔ | <3,0 |
| estilo | objeto | {backgroundColor:"#eee"} | suporta o estilo de visualização normal, você pode usar isso para definir a cor da borda/espaçamento... | ✔ | ✔ | ✔ | <3,0 |
| progressoContainerStyle | objeto | {backgroundColor:"#eee"} | suporta o estilo de visualização normal, você pode usar isso para definir a cor da borda/espaçamento... | ✔ | ✔ | ✔ | 6.9.0 |
| renderActivityIndicator | (progresso) => Componente | ao carregar mostre-o como um indicador, você pode usar seu componente | ✔ | ✔ | ✖ | <3,0 | |
| ativarAntialiasing | bool | verdadeiro | melhorar um pouco a renderização em telas de baixa resolução, mas talvez haja algum problema no Android 4.4, então adicione uma opção | ✖ | ✔ | ✖ | <3,0 |
| ativarPaging | bool | falso | mostrar apenas uma página na tela | ✔ | ✔ | ✔ | 5.0.1 |
| habilitarRTL | bool | falso | role a página como "página3, página2, página1" | ✔ | ✖ | ✔ | 5.0.1 |
| ativarAnnotationRendering | bool | verdadeiro | ativar anotação de renderização, aviso: iOS suporta apenas configuração inicial, não suporta alteração em tempo real | ✔ | ✔ | ✖ | 5.0.3 |
| ativarDoubleTapZoom | bool | verdadeiro | Ative o toque duplo para ampliar o gesto | ✔ | ✔ | ✖ | 6.8.0 |
| trustAllCerts | bool | verdadeiro | Permitir conexões a servidores com certificação autoassinada | ✔ | ✔ | ✖ | 6,0.? |
| página única | bool | falso | Mostrar apenas a primeira página, útil para visualizações em miniatura | ✔ | ✔ | ✔ | 6.2.1 |
| onLoadProgress | função (porcentagem) | nulo | retorno de chamada ao carregar, retorna o progresso do carregamento (0-1) | ✔ | ✔ | ✖ | <3,0 |
| onLoadComplete | function(numberOfPages, caminho, {largura, altura}, tableContents) | nulo | retorno de chamada quando o carregamento do PDF for concluído, retornar contagem total de páginas, caminho local/cache do PDF, {largura, altura} e índice | ✔ | ✔ | ✔ mas sem tableContents | <3,0 |
| onPageChanged | função (página, número de páginas) | nulo | retorno de chamada quando a página é alterada, retorna a página atual e a contagem total de páginas | ✔ | ✔ | ✔ | <3,0 |
| onError | função (erro) | nulo | retorno de chamada quando ocorreu um erro | ✔ | ✔ | ✔ | <3,0 |
| onPageSingleTap | função (página) | nulo | retorno de chamada quando a página foi tocada uma vez | ✔ | ✔ | ✔ | 3,0 |
| onScaleChanged | função (escala) | nulo | retorno de chamada quando dimensionar página | ✔ | ✔ | ✔ | 3,0 |
| onPressLink | função (uri) | nulo | retorno de chamada quando o link é tocado | ✔ | ✔ | ✖ | 6.0.0 |
| parâmetro | Descrição | padrão | iOS | Android | Windows |
|---|---|---|---|---|---|
| uri | fonte pdf, consulte o seguinte para obter detalhes. | obrigatório | ✔ | ✔ | ✔ |
| esconderijo | usar cache ou não | falso | ✔ | ✔ | ✖ |
| cacheFileName | nome de arquivo específico para arquivo PDF em cache | Resultado SHA1(uri) | ✔ | ✔ | ✖ |
| expiração | arquivo de cache expirou em segundos (0 não expirou) | 0 | ✔ | ✔ | ✖ |
| método | método de solicitação quando uri é um URL | "PEGAR" | ✔ | ✔ | ✖ |
| cabeçalhos | solicitar cabeçalhos quando uri é um URL | {} | ✔ | ✔ | ✖ |
| Uso | Descrição | iOS | Android | Windows |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | carregar pdf de um URL | ✔ | ✔ | ✔ |
{require("./test.pdf")} | carregar pdf relacionado ao arquivo js (não precisa adicionar por xcode) | ✔ | ✖ | ✖ |
{uri:"bundle-assets://path/to/xxx.pdf"} | carregue o pdf dos ativos, o arquivo deve estar em android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
{uri:"bundle-assets://xxx.pdf"} | carregar o pdf dos ativos, você deve adicionar o pdf ao projeto pelo xcode. isso não suporta pasta. | ✔ | ✖ | ✖ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | carregar pdf da string base64 | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | carregar pdf do sistema de arquivos local | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | carregar pdf empacotado com o aplicativo UWP | ✖ | ✖ | ✔ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | carregar pdf do URI de conteúdo | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | carregar pdf do URL do blob | ✖ | ✔ | ✖ |
*) requer a construção do React Native a partir do código-fonte com este patch
Os métodos operam em uma referência ao elemento PDF. Você pode obter uma referência com o seguinte código:
return (
<Pdf
ref={(pdf) => { this.pdf = pdf; }}
source={source}
...
/>
);
setPage(pageNumber)
Defina a página atual do componente PDF. pageNumber é um número inteiro positivo. Se pageNumber > numberOfPages, a página atual não será alterada.
Exemplo:
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
