解决react-native-pdf在Web平台打包失败的问题

2025-07-09 09:42:59作者：秋阔奎Evelyn

react-native-pdf是一个流行的React Native组件库，用于在移动应用中显示PDF文档。然而，当开发者尝试在Web平台使用该库时，可能会遇到打包失败的问题。本文将深入分析问题原因并提供两种有效的解决方案。

问题分析

当项目中包含react-native-pdf组件时，Web平台打包过程会失败，并出现"Unable to resolve '../Utilities/Platform'"的错误。这是因为：

react-native-pdf主要针对移动平台(iOS/Android)设计
Web平台打包时仍会尝试解析所有组件依赖
即使使用Platform.OS条件渲染也无法避免打包阶段的依赖解析

解决方案一：平台特定文件扩展

这是最推荐的解决方案，利用了React Native的自动文件解析机制：

创建两个组件文件：
- Pdf/index.native.tsx - 移动平台专用实现
- Pdf/index.tsx - Web平台备用实现
在native文件中实现真正的PDF功能：

import ReactNativePdf, { PdfProps } from 'react-native-pdf';

export default function Pdf(props: PdfProps) {
  return <ReactNativePdf {...props} />;
}

在Web文件中提供替代方案：

import { PdfProps } from 'react-native-pdf';

export default function Pdf(props: PdfProps) {
  return <Text>PDF not available on web.</Text>;
}

这种方法的优势在于：

完全遵循React Native的平台特定扩展机制
打包工具会自动选择正确的文件
代码组织清晰，维护方便

解决方案二：Webpack配置排除

如果你使用Storybook或其他需要Webpack配置的场景，可以通过修改Webpack配置来排除问题：

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
    };

    config.module.rules.push({
      test: /\.native\.js$/,
      use: 'null-loader',
    });

    return config;
  },
};