如何使用react-native-pdf实现PDF全屏（宽高适配）显示？

下面是基于react-native-pdf的完整解决方案，能让A4 PDF横向拉伸填满屏幕，达到类似图片全屏的效果：

核心配置与代码示例 #

确保你已安装并链接react-native-pdf（RN0.60+支持自动链接），直接使用以下代码即可：

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

// 获取当前屏幕宽高
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const FullScreenLandscapePDF = () => {
  // PDF源：支持远程URI、本地文件路径或本地资源
  const pdfSource = { 
    uri: '你的PDF地址', 
    cache: true 
    // 本地资源写法：require('./assets/your-a4-file.pdf')
  };

  return (
    <View style={styles.rootContainer}>
      <PDF
        source={pdfSource}
        style={styles.pdfContainer}
        // 强制横向显示
        orientation="landscape"
        // 拉伸填充整个视图容器
        scaleMode="fill"
        // 适配策略：2表示拉伸填充视图（0=适配宽度，1=适配高度，2=填充）
        fitPolicy={2}
        // 清除PDF渲染默认边距
        pageMargins={{ top: 0, bottom: 0, left: 0, right: 0 }}
        // 开启抗锯齿提升清晰度
        enableAntialiasing={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    // 彻底清除容器内外边距
    margin: 0,
    padding: 0,
    // 可选：设置背景色，避免PDF边缘留白露出底色
    backgroundColor: '#000',
  },
  pdfContainer: {
    // 直接用屏幕宽高作为PDF组件尺寸
    width: screenWidth,
    height: screenHeight,
  },
});

export default FullScreenLandscapePDF;

关键参数说明 #

• orientation="landscape"：强制PDF以横向模式渲染，适配A4纸的宽高比
• scaleMode="fill"：让PDF拉伸填满整个组件容器，忽略原比例（若要保持比例全屏，可改用scaleMode="fit"，但会存在留白）
• fitPolicy={2}：配合scaleMode控制PDF适配逻辑，2代表完全填充视图
• pageMargins：清除PDF渲染时的默认边距，确保内容贴边显示

原生端优化（可选） #

如果上述配置仍有留白或适配问题，可针对原生端调整：

iOS端 #

1. 找到react-native-pdf的iOS源码文件RCTPDFView.m
2. 修改- (void)layoutSubviews方法，确保PDFView的frame完全匹配父视图：

- (void)layoutSubviews {
  [super layoutSubviews];
  self.pdfView.frame = self.bounds;
  self.pdfView.autoScales = YES;
  self.pdfView.displayMode = PDFDisplayModeSinglePageContinuous;
}

3. 使用patch-package工具持久化修改，避免依赖更新后丢失

Android端 #

1. 打开react-native-pdf的安卓源码PDFViewManager.java
2. 在createViewInstance方法中添加以下配置：

pdfView.setLayoutParams(new ViewGroup.LayoutParams(
  ViewGroup.LayoutParams.MATCH_PARENT,
  ViewGroup.LayoutParams.MATCH_PARENT
));
pdfView.getSettings().setLoadWithOverviewMode(false);
pdfView.getSettings().setUseWideViewPort(true);

3. 同样用patch-package保存修改

注意事项 #

• 如果PDF本身内置边距，需在PDF生成阶段去除，仅靠代码无法完全消除留白
• 测试时需覆盖不同屏幕尺寸的设备，确保适配效果一致
• 远程PDF需配置对应网络权限（iOS的NSAppTransportSecurity、安卓的INTERNET权限）

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