使用react-native-pdf加载PDF时仅显示0.0的问题求助

核心排查与修复方案 #

• 确认PDF源的有效性
  检查传入组件的source是否正确：

  • 本地文件：使用require('./test.pdf')或{uri: 'file:///绝对路径/xxx.pdf'}，验证文件存在且路径无拼写错误。
  • 远程URL：直接在浏览器打开该URL，确认PDF可正常访问；同时检查网络权限：Android需在AndroidManifest.xml添加<uses-permission android:name="android.permission.INTERNET"/>，iOS需在Info.plist配置ATS规则或允许目标域名。

• 确保依赖配置完全生效

  • Android：检查android/app/build.gradle中的依赖配置是否同步完成，若存在依赖版本冲突（如com.google.android.gms系列），尝试统一相关依赖版本后重新编译。
  • iOS：执行以下命令清理缓存并重新安装依赖：

    rm -rf node_modules package-lock.json
    npm install
    cd ios && pod deintegrate && pod install && cd ..
    npx react-native clean && npx react-native run-ios
    

    确认Podfile.lock中react-native-pdf和PDFKit已正确安装。

• 修正组件基础配置
  必须给Pdf组件设置有效宽高（宽高为0会导致仅显示角落的"0.0"），同时添加错误回调排查问题：

  import Pdf from 'react-native-pdf';
  
  <Pdf
    source={{uri: 'https://example.com/valid-test.pdf'}}
    style={{flex: 1, width: '100%', height: '100%'}}
    onLoadComplete={(pageCount) => console.log('加载完成，页数：', pageCount)}
    onError={(err) => console.error('PDF加载错误：', err)}
  />
  

• 排除PDF文件本身问题
  尝试使用官方示例中的测试PDF或其他已知正常的文件，排除目标PDF存在加密、格式损坏等问题。

• 验证版本兼容性
  确认当前react-native版本与react-native-pdf最新版适配，若存在兼容问题，尝试降级到官方标注的适配版本。

内容的提问来源于stack exchange，提问作者Habtamu Asefa