升级Expo SDK 51后CameraView组件超出模态窗口问题求助

问题背景 #

升级到 Expo 51.0.2 + expo-camera 15.0.14 后，CameraView 的ratio属性被移除，原依赖该属性控制画面比例的逻辑失效，导致相机组件边缘超出模态窗口，单独适配不同设备样式无法覆盖所有场景。

可行解决方案 #

1. 使用resizeMode属性控制画面适配

Expo Camera 15 新增了resizeMode属性，替代原ratio的部分功能，通过它可以让相机画面自动适配容器尺寸：

<CameraView
  facing="back"
  autofocus={autoFocus ? 'on' : 'off'}
  flash={flashMode}
  onBarcodeScanned={handleBarCodeScanned}
  barcodeScannerSettings={{
    barcodeTypes: ['qr'],
  }}
  resizeMode="contain" // 或根据需求选'cover'
  style={{ width: '100%', height: '100%' }}
>
  {/* 子组件内容保持不变 */}
</CameraView>

• contain：保持相机画面比例，完整显示在容器内，可能留黑边
• cover：拉伸/裁剪画面填满容器，无黑边但可能裁切部分内容

2. 用容器包裹并裁剪超出部分

给CameraView套一个和模态窗口尺寸匹配的容器，设置overflow: 'hidden'强制裁剪溢出内容：

<View style={{ width: '100%', height: '80%', borderRadius: 16, overflow: 'hidden' }}>
  <CameraView
    facing="back"
    autofocus={autoFocus ? 'on' : 'off'}
    flash={flashMode}
    onBarcodeScanned={handleBarCodeScanned}
    barcodeScannerSettings={{
      barcodeTypes: ['qr'],
    }}
    resizeMode="cover"
    style={{ flex: 1 }}
  >
    {/* 子组件内容保持不变 */}
  </CameraView>
</View>

容器尺寸可根据模态窗口实际大小调整，borderRadius可与模态窗口保持一致，避免边角溢出。

3. 动态计算适配比例

根据设备屏幕比例和模态窗口可用空间，动态计算相机容器宽高比，确保画面完全适配：

import { useWindowDimensions } from 'react-native';

// 组件内获取屏幕尺寸
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
// 自定义模态窗口占比
const modalWidth = screenWidth * 0.9;
const modalHeight = screenHeight * 0.7;
// 相机画面比例（可选4:3/16:9等原生比例）
const cameraRatio = 4 / 3;

// 计算适配尺寸
let cameraWidth = modalWidth;
let cameraHeight = cameraWidth / cameraRatio;
if (cameraHeight > modalHeight) {
  cameraHeight = modalHeight;
  cameraWidth = cameraHeight * cameraRatio;
}

// 渲染逻辑
return (
  <View style={{ width: modalWidth, height: modalHeight, overflow: 'hidden' }}>
    <CameraView
      facing="back"
      autofocus={autoFocus ? 'on' : 'off'}
      flash={flashMode}
      onBarcodeScanned={handleBarCodeScanned}
      barcodeScannerSettings={{
        barcodeTypes: ['qr'],
      }}
      style={{ width: cameraWidth, height: cameraHeight, alignSelf: 'center' }}
    >
      {/* 子组件内容保持不变 */}
    </CameraView>
  </View>
);

该方案可保证相机画面在模态窗口内完美适配，避免溢出或黑边过多问题。

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