React Native Expo中Modal内react-native-pdf无法显示的问题求助

针对你遇到的iPhone上Modal内react-native-pdf无法显示PDF的问题，以下是几个常见原因及解决方法：

1. Expo Managed环境不兼容react-native-pdf #

react-native-pdf依赖原生iOS/Android模块，而Expo的Managed Workflow不允许直接修改原生代码，导致组件无法正常工作。

解决方法：

• 改用Expo官方提供的expo-pdf来展示PDF，无需原生配置：

  // 先安装依赖：expo install expo-pdf
  import { PDFView } from 'expo-pdf';
  
  // 在Modal中替换原Pdf组件
  {pdfSource.uri && (
    <PDFView
      style={styles.pdf}
      source={{ uri: pdfSource.uri }}
      onLoadComplete={(numberOfPages) => console.log(`加载完成，共${numberOfPages}页`)}
      onError={(error) => console.error('PDF加载失败:', error)}
    />
  )}
  

• 若坚持使用react-native-pdf，需将项目切换到Bare Workflow，再按照组件文档配置原生项目。

2. Modal布局冲突导致PDF组件无显示空间 #

iPhone上Modal的布局设置可能挤压PDF组件的显示区域，导致无法渲染。

解决方法：

• 调整modalView样式，优化padding和高度限制：

  modalView: {
    width: "90%",
    backgroundColor: "white",
    borderRadius: 20,
    padding: 15, // 减少内边距避免挤压PDF区域
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    maxHeight: Dimensions.get("window").height * 0.8, // 限制Modal最大高度
  },
  

• 给PDF组件包裹一个flex容器，确保它能填充可用空间：

  <View style={{ flex: 1, width: '100%', marginVertical: 10 }}>
    {pdfSource.uri && <PDFView style={styles.pdf} source={{ uri: pdfSource.uri }} />}
  </View>
  

3. iOS ATS限制HTTP请求 #

如果PDF URL是HTTP协议（比如http://localhost:3000），iOS的App Transport Security会阻止非HTTPS请求，导致无法加载。

解决方法：

• 在app.json中添加ATS例外配置（仅开发环境使用，上线需改为具体域名）：

  "ios": {
    "infoPlist": {
      "NSAppTransportSecurity": {
        "NSExceptionDomains": {
          "localhost": {
            "NSIncludesSubdomains": true,
            "NSAllowsLocalNetworking": true
          }
        }
      }
    }
  }
  

• 生产环境建议将PDF资源切换到HTTPS协议。

4. 动态设置source后组件未及时刷新 #

Modal显示时，PDF组件可能在source未完全设置好时就已渲染，导致加载失败。

解决方法：

• 监听documentModalVisible状态，在Modal显示后再设置PDF source：

  useEffect(() => {
    if (documentModalVisible && selectedDocument) {
      setPdfSource({ uri: selectedDocument.url });
    }
  }, [documentModalVisible, selectedDocument]);
  
  // 修改handleDocumentPress，移除直接设置pdfSource的代码
  const handleDocumentPress = (document) => {
    setSelectedDocument(document);
    setModalVisible(false);
    setDocumentModalVisible(true);
  };
  

• 完善加载状态，在PDF加载完成前显示ActivityIndicator：

  <PDFView
    style={styles.pdf}
    source={{ uri: pdfSource.uri }}
    onLoadStart={() => setLoading(true)}
    onLoadComplete={() => setLoading(false)}
    onError={() => setLoading(false)}
  />
  

额外排查步骤 #

• 查看onError回调的打印信息，明确是资源加载失败还是组件渲染问题；
• 在iPhone的Safari中直接打开PDF URL，确认资源本身可正常访问。

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