iOS端react-native-pdf组件FitPolicy适配画布宽度失效问题

问题信息 #

仅iOS平台出现该问题，使用的依赖版本：

"react-native": "0.72.4",
"react-native-blob-util": "^0.19.6",
"react-native-pdf": "^6.7.4"

现象描述 #

iOS端用react-native-pdf显示PDF时，首图显示尺寸偏小（类似被裁剪一半），后续大图片无法完整适配屏幕。推测组件以第一页的画布尺寸作为全局适配基准，导致后续页面适配错误。原生PDF阅读器可正常显示，且缩小图片不是可行方案。

已尝试但无效的操作：

• 切换FitPolicy 0/1/2
• 设置小于常规值的scale参数

当前使用的样式代码：

container: { // style for the view that wraps the pdf
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  pdf: { // for pdf 
    flex: 1,
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
   // screen or window values make no difference.
  },

可行解决方案 #

1. 动态适配每页尺寸 #

利用组件的onLoadComplete和onPageChanged事件，获取每页的实际尺寸，动态调整组件宽高，避免全局复用第一页的适配比例：

import React, { useState } from 'react';
import { View, Dimensions } from 'react-native';
import PDF from 'react-native-pdf';

const PdfViewer = () => {
  const screenWidth = Dimensions.get('screen').width;
  const [currentPageSize, setCurrentPageSize] = useState({
    width: screenWidth,
    height: Dimensions.get('screen').height
  });
  let allPageInfos = [];

  // 加载完成时获取所有页面的尺寸信息
  const handleLoadComplete = (totalPages, pageInfos) => {
    allPageInfos = pageInfos;
    // 初始化第一页尺寸
    if (pageInfos.length > 0) {
      const firstPage = pageInfos[0];
      const scale = screenWidth / firstPage.width;
      setCurrentPageSize({
        width: screenWidth,
        height: firstPage.height * scale
      });
    }
  };

  // 切换页面时更新组件尺寸
  const handlePageChanged = (currentPage) => {
    if (allPageInfos[currentPage - 1]) {
      const page = allPageInfos[currentPage - 1];
      const scale = screenWidth / page.width;
      setCurrentPageSize({
        width: screenWidth,
        height: page.height * scale
      });
    }
  };

  return (
    <View style={styles.container}>
      <PDF
        source={{ uri: '你的PDF文件地址' }} // 替换为实际PDF路径
        style={{ ...styles.pdf, ...currentPageSize }}
        onLoadComplete={handleLoadComplete}
        onPageChanged={handlePageChanged}
        fitPolicy={2} // 保持宽高比适配
      />
    </View>
  );
};

const styles = {
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  pdf: {
    flex: 1,
  },
};

export default PdfViewer;

2. 修改iOS原生层适配逻辑 #

如果动态调整无效，直接修改react-native-pdf的iOS原生代码，为每一页单独计算缩放比例：

1. 找到node_modules/react-native-pdf/ios/RCTPdfView.m文件
2. 定位到renderPage方法，替换原有缩放比例计算逻辑：

- (void)renderPage:(CGPDFPageRef)pageRef atIndex:(NSInteger)index {
    // ... 保留原有初始化代码
    CGSize pageSize = CGPDFPageGetBoxRect(pageRef, kCGPDFMediaBox).size;
    // 为当前页单独计算适配屏幕的缩放比例
    CGFloat scale = MIN(self.bounds.size.width / pageSize.width, self.bounds.size.height / pageSize.height);
    // 替换原有复用第一页scale的代码
    CGAffineTransform transform = CGAffineTransformMakeScale(scale, scale);
    // ... 保留后续渲染代码
}

修改后执行pod install并重新编译iOS项目。

3. 升级组件到测试版 #

部分页面适配问题已在新版本中修复，尝试安装最新测试版：

npm install react-native-pdf@next

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