react-native集成PDF预览组件react-native-pdf

react-native集成PDF预览组件react-native-pdf

版本信息

react-native-pdf 文档链接

本人使用的框架版本信息:

"react-ntive":"0.70.6",

"react-native-pdf":"~6.6.0",

"react-native-blob-util": "~0.16.0"

我刚开始使用了最新版的react-native-pdf但是会导致打包报错,我尝试降低版本才打包成功

至于react-native-blob-util使用最新版也是打包报各种错误,没办法也是降低了版本才可以,

为什么要安装react-native-blob-util组件,是因为在react-native-pdf组件中引用了该组件,如果本地不安装就会报错

版本问题:因为我是针对0.70.6的rn版本进行集成,如果你的版本更高,我给的版本打包报错的情况下,则需要适当调高对应的组件版本

如果rn版本比较低则建议查看文档解决问题

安卓配置修改

修改android/app/build.gradle文件,在android中加入以下代码

java 复制代码
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'
	}
}

IOS配置自己看文档

使用方式(直接照抄即可)

javascript 复制代码
import Pdf from 'react-native-pdf';

<View style={{ flex: 1 }}>
	<Pdf
	   source={{
	     uri: url,
	   }}
	   trustAllCerts={false}
	   onLoadComplete={(numberOfPages, filePath) => {
	     console.log(`Number of pages: ${numberOfPages}`);
	   }}
	   onPageChanged={(page, numberOfPages) => {
	     console.log(`Current page: ${page}`);
	   }}
	   onError={error => {
	     console.log('error', error);
	   }}
	   onPressLink={uri => {
	     console.log(`Link pressed: ${uri}`);
	   }}
	   style={{ flex: 1 }}
	 />
 </View>

注意:trustAllCerts={false}必须得加,不然会加载不出来PDF

相关推荐
长空任鸟飞_阿康几秒前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3584 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12155 分钟前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
苏打水com6 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手15 分钟前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
小潘同学19 分钟前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon21 分钟前
Kuikly跨端模式接入资源管理
前端
tianchang24 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖25 分钟前
Vue3.0 Hook 使用好用多多
前端