React-QR-reader视频尺寸与设备不匹配问题修复咨询

针对React-QR-reader组件设置宽高后视频实际尺寸不生效的问题，可通过以下几种方式解决：

1. 用object-fit强制视频填充容器 #

相机视频本身有固定宽高比，直接设置宽高会导致留白或拉伸。给videoStyle添加objectFit属性，让视频填满指定容器：

videoStyle={{
  width: 300,
  height: 300,
  border: 'solid',
  borderWidth: '4px',
  borderColor: qrData.length === 0 ? 'red' : 'green',
  objectFit: 'cover' // 保持比例裁剪超出部分，或用'fill'强制拉伸填满
}}

2. 约束相机输出分辨率 #

在constraints中指定理想分辨率，让浏览器尽量匹配300x300的尺寸：

constraints={{
  facingMode: 'environment',
  width: { ideal: 300, max: 300 },
  height: { ideal: 300, max: 300 }
}}

注：部分设备可能不支持指定分辨率，该设置仅为浏览器提供适配参考。

3. 容器添加溢出隐藏 #

给外层容器设置overflow: hidden，确保视频超出容器的部分被隐藏，避免留白：

containerStyle={{ 
  width: 300, 
  height: 300,
  overflow: 'hidden'
}}

完整示例代码 #

<QrReader
  scanDelay={500}
  onResult={handleScan}
  ViewFinder={scanOverlay}
  containerStyle={{ 
    width: 300, 
    height: 300,
    overflow: 'hidden'
  }}
  videoStyle={{
    width: 300,
    height: 300,
    border: 'solid',
    borderWidth: '4px',
    borderColor: qrData.length === 0 ? 'red' : 'green',
    objectFit: 'cover'
  }}
  constraints={{
    facingMode: 'environment',
    width: { ideal: 300, max: 300 },
    height: { ideal: 300, max: 300 }
  }}
/>

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