react native pdf
v6.7.1
一个React原生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-util | 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链接到您的项目中：
React Native 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-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>
在 app .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。您的react-native版本太旧，请将其升级到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。为什么它不能与 React Native Expo 一起使用？
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系统 | 安卓 | 视窗 | 首次发布 |
|---|---|---|---|---|---|---|---|
| 来源 | 目的 | 不为空 | PDF 源，如 {uri:xxx, cache:false}。详细内容请参见下文。 | ✔ | ✔ | ✔ | <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适合视图的宽度，则不能将fitWidth=true与scale一起使用 | ✔ | ✔ | ✔ | <3.0，从3.0开始被放弃 |
| 适合政策 | 数字 | 2 | 0：适合宽度，1：适合高度，2：适合两者（默认） | ✔ | ✔ | ✔ | 3.0 |
| 间距 | 数字 | 10 | 页面之间的断路器尺寸 | ✔ | ✔ | ✔ | <3.0 |
| 密码 | 细绳 | ”” | pdf 密码，如果密码错误，将调用 OnError() 并显示消息“需要密码或密码不正确”。 | ✔ | ✔ | ✔ | <3.0 |
| 风格 | 目的 | {背景颜色：“#eee”} | 支持普通视图样式，您可以使用它来设置边框/间距颜色... | ✔ | ✔ | ✔ | <3.0 |
| 进度容器样式 | 目的 | {背景颜色：“#eee”} | 支持普通视图样式，您可以使用它来设置边框/间距颜色... | ✔ | ✔ | ✔ | 6.9.0 |
| 渲染活动指示器 | （进度）=> 组件 | 加载时将其显示为指示器，您可以使用您的组件 | ✔ | ✔ | ✖ | <3.0 | |
| 启用抗锯齿 | 布尔值 | 真的 | 改善了低分辨率屏幕上的渲染效果，但在 Android 4.4 上可能会出现一些问题，因此添加一个开关 | ✖ | ✔ | ✖ | <3.0 |
| 启用分页 | 布尔值 | 错误的 | 屏幕上仅显示一页 | ✔ | ✔ | ✔ | 5.0.1 |
| 启用RTL | 布尔值 | 错误的 | 滚动页面为“第3页，第2页，第1页” | ✔ | ✖ | ✔ | 5.0.1 |
| 启用注释渲染 | 布尔值 | 真的 | 启用渲染注释，注意：iOS仅支持初始设置，不支持实时更改 | ✔ | ✔ | ✖ | 5.0.3 |
| 启用双击缩放 | 布尔值 | 真的 | 启用双击缩放手势 | ✔ | ✔ | ✖ | 6.8.0 |
| 信任所有证书 | 布尔值 | 真的 | 允许连接到具有自签名认证的服务器 | ✔ | ✔ | ✖ | 6.0。？ |
| 单页 | 布尔值 | 错误的 | 仅显示第一页，对于缩略图视图很有用 | ✔ | ✔ | ✔ | 6.2.1 |
| 加载进度 | 函数（百分比） | 无效的 | 加载时回调，返回加载进度（0-1） | ✔ | ✔ | ✖ | <3.0 |
| 加载完成时 | 函数（页数，路径，{宽度，高度}，表格内容） | 无效的 | pdf加载完成时的回调，返回总页数，pdf本地/缓存路径，{宽度，高度}和目录 | ✔ | ✔ | ✔ 但没有表格内容 | <3.0 |
| 页面更改 | 函数（页，页数） | 无效的 | 页面改变时回调，返回当前页数和总页数 | ✔ | ✔ | ✔ | <3.0 |
| 错误时 | 函数（错误） | 无效的 | 发生错误时的回调 | ✔ | ✔ | ✔ | <3.0 |
| 页面单击 | 功能（页） | 无效的 | 单击页面时的回调 | ✔ | ✔ | ✔ | 3.0 |
| 规模改变 | 函数（尺度） | 无效的 | 缩放页面时的回调 | ✔ | ✔ | ✔ | 3.0 |
| 新闻链接 | 函数（uri） | 无效的 | 点击链接时的回调 | ✔ | ✔ | ✖ | 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 > numberOfPages，则当前页不会更改。
例子：
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
