使用react-native-pdf加载示例PDF仅显示加载条不渲染内容如何解决

react-native-pdf 仅显示加载条不渲染的排查方案 #

1. 网络权限配置缺失 #

• 安卓端需要在android/app/src/main/AndroidManifest.xml中添加网络权限声明：

<uses-permission android:name="android.permission.INTERNET" />

• iOS端需要确认ATS（应用传输安全）配置未拦截对应PDF域名的请求，可临时在Info.plist中添加全局允许HTTP/HTTPS请求的配置测试：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

2. 原生依赖未完整配置 #

react-native-pdf依赖react-native-blob-util处理文件下载、缓存逻辑，需要完成完整的依赖安装流程：

• 安装依赖包：npm install react-native-blob-util --save
• iOS端进入ios目录执行pod install后重新编译整个项目
• 安卓端确认项目android/build.gradle中的minSdkVersion >= 21，满足组件最低版本要求

3. 布局样式冲突 #

当前代码的布局配置存在两处可能导致渲染异常的问题：

• PDF父容器的alignItems: 'center'属性会干扰组件宽高计算，可先移除该属性测试
• 不要使用Dimensions固定PDF组件的宽高，改为自适应父容器即可，修改样式如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: '100%',
  }
});

4. 缓存权限问题 #

你当前开启了cache: true配置，需要应用拥有本地存储读写权限才能正常工作，可先将cache改为false测试是否能加载，如果可以加载则说明是存储权限问题，申请存储权限后再开启缓存即可。

5. 优先查看错误日志 #

代码中已经配置了onError回调，优先查看控制台输出的错误信息，可直接定位具体根因，网络请求失败、文件解析失败等场景都会输出对应错误提示。

你也可以替换为其他公网可正常访问的PDF链接测试，排除源文件链接本身无法访问的问题。

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