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

诚实可靠王大锤2025-09-28 15:12

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