如何在React Native中展示从Google Drive导出的PDF文档？

你可以通过两种方式实现需求，下面是具体方案：

方法一：直接通过Blob加载（无需本地存储） #

这种方式不需要把文件保存到本地，直接将下载的流转换为Blob后生成URI传给react-native-pdf：

// 先从Google Drive获取PDF流
const pdfStream = await gdrive.files.export(id, { mimeType: "application/pdf" }, { responseType: 'stream' });

// 将流转换为Blob对象
const blob = await new Promise((resolve, reject) => {
  const chunks = [];
  pdfStream.on('data', chunk => chunks.push(chunk));
  pdfStream.on('end', () => resolve(new Blob(chunks, { type: 'application/pdf' })));
  pdfStream.on('error', reject);
});

// 生成Blob的本地URI
const blobUri = URL.createObjectURL(blob);

// 在Pdf组件中使用
<Pdf
  trustAllCerts={false}
  enablePaging={true}
  horizontal={true}
  source={{ uri: blobUri }}
  onLoadComplete={(numberOfPages, filePath) => {
    console.log(`页数：${numberOfPages}`);
  }}
  // 其他组件属性...
/>

// 组件卸载时释放Blob URI，避免内存泄漏
useEffect(() => {
  return () => {
    URL.revokeObjectURL(blobUri);
  };
}, [blobUri]);

方法二：用react-native-blob-util保存到本地后加载 #

如果需要离线查看PDF，可以把文件保存到应用本地目录，再通过本地路径加载：

import RNBlobUtil from 'react-native-blob-util';

// 定义下载并保存PDF的函数
const saveAndLoadPdf = async (fileId) => {
  const pdfStream = await gdrive.files.export(fileId, { mimeType: "application/pdf" }, { responseType: 'stream' });

  // 选择Android应用私有目录作为保存路径，无需额外权限
  const filePath = `${RNBlobUtil.fs.dirs.DocumentDir}/downloaded_pdf.pdf`;

  // 创建文件写入流
  const writeStream = RNBlobUtil.fs.createWriteStream(filePath);

  // 将下载流管道到写入流
  pdfStream.pipe(writeStream);

  // 等待写入完成
  await new Promise((resolve, reject) => {
    writeStream.on('finish', resolve);
    writeStream.on('error', reject);
  });

  return filePath;
};

// 在组件中调用并加载PDF
const [localPdfPath, setLocalPdfPath] = useState(null);

useEffect(() => {
  const loadPdf = async () => {
    const path = await saveAndLoadPdf('你的文件ID');
    setLocalPdfPath(path);
  };
  loadPdf();
}, []);

return (
  localPdfPath && (
    <Pdf
      trustAllCerts={false}
      enablePaging={true}
      horizontal={true}
      source={{ uri: `file://${localPdfPath}` }}
      onLoadComplete={(numberOfPages, filePath) => {
        console.log(`页数：${numberOfPages}`);
      }}
      // 其他组件属性...
    />
  )
);

注意事项 #

• Blob方式适合临时查看PDF，必须在组件卸载时调用URL.revokeObjectURL释放资源，防止内存泄漏。
• 本地存储方式推荐使用应用私有目录（如示例中的DocumentDir），Android 11及以上无需申请额外存储权限；如果要保存到公共目录，需要对应权限配置。
• 因为PDF是二进制文件，处理流时不需要额外编码，直接传输写入即可。

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