使用Expo cli和react-native-pdf构建APK时PDF无法显示求助

1. 本地PDF资源打包配置检查 #

• 确保app.json的assetBundlePatterns包含PDF文件所在目录，避免打包时遗漏资源：

  "assetBundlePatterns": [
    "**/*",
    "assets/pdf/**/*.pdf"
  ]
  

• 改用Expo的Asset模块加载本地资源，不要直接使用相对路径，示例代码：

  import { Asset } from 'expo-asset';
  
  const loadLocalPDF = async () => {
    const pdfAsset = Asset.fromModule(require('./assets/pdf/sample.pdf'));
    await pdfAsset.downloadAsync();
    return pdfAsset.localUri;
  };
  
  // 在组件中使用
  const [pdfUri, setPdfUri] = useState(null);
  useEffect(() => {
    loadLocalPDF().then(uri => setPdfUri(uri));
  }, []);
  
  <PDF source={{ uri: pdfUri }} style={{ flex: 1 }} />
  

2. 远程PDF的权限与协议处理 #

• 安卓生产环境默认限制HTTP请求，确保远程PDF地址使用HTTPS；若必须用HTTP，在app.json中开启明文流量：

  "android": {
    "usesCleartextTraffic": true,
    // 其他安卓配置项
  }
  

• 检查远程服务器的CORS设置，确保允许APP访问PDF资源。

3. 依赖版本兼容性验证 #

• 确认react-native-pdf版本与当前Expo SDK版本适配，比如Expo SDK 49+可尝试react-native-pdf@6.7.4及以上版本，避免版本冲突导致渲染失败。

4. 生产环境日志调试 #

• 用adb logcat抓取安卓设备日志，过滤PDF相关错误信息：

  adb logcat *:S ReactNative:V ReactNativeJS:V PDF:V
  

• 日志会明确显示文件找不到、权限不足或解码失败等具体原因，针对性修复。

5. 用户选择PDF的场景优化 #

• 若涉及用户本地PDF文件，改用Expo的DocumentPicker获取文件URI，确保权限申请正确：

  import * as DocumentPicker from 'expo-document-picker';
  
  const pickAndLoadPDF = async () => {
    const result = await DocumentPicker.getDocumentAsync({ type: 'application/pdf' });
    if (!result.canceled) {
      setPdfUri(result.assets[0].uri);
    }
  };
  

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