Expo项目中React Native WebView仅显示PDF第一页问题求助

问题根源 #

当前代码的布局限制了PDF容器高度，且WebView禁用了滚动，导致仅能显示第一页；同时object标签宽高未正确配置，iframe样式存在引号嵌套语法错误。

修复方案 #

• 开启WebView滚动功能，将scrollEnabled设为true
• 修正HTML内部样式错误，确保PDF容器可自适应内容高度
• 调整object和iframe的宽高属性，使其充满可用空间

修改后的代码 #

<WebView
  javaScriptEnabled={true}
  scrollEnabled={true} // 启用WebView滚动
  source={{
    html: `
      <html>
        <body style="margin:0; padding:0;">
          <object 
            data="data:application/pdf;base64, ${pdf64}" 
            type="application/pdf"
            style="width:100%; height:100vh;"
          >
            <iframe 
              src="data:application/pdf;base64, ${pdf64}"
              style="width:100%; height:100vh; border:none;"
            >
              无法显示PDF，请检查浏览器支持情况
            </iframe>
          </object>
        </body>
      </html>
    `,
  }}
/>

补充说明 #

• 用100vh设置容器高度，确保PDF占满视口高度，WebView滚动将自动处理长内容的纵向浏览
• 移除多余的flex布局，避免限制容器高度扩展
• 修正iframe的样式引号错误，保证样式规则正常生效

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