升级至SDK 51后如何实现方形相机视图？

SDK 51中旧的Camera组件被弃用，替换为CameraView，原有的宽高比设置属性已移除，要实现方形相机视图可以通过以下两种方式：

方法一：容器裁剪法 #

通过设置正方形容器并隐藏超出部分，配合CameraView的缩放调整取景范围，快速实现方形视图：

import { View } from 'react-native';
import { CameraView } from 'expo-camera';

export default function SquareCamera() {
  return (
    // 正方形容器，可根据需求调整宽高（比如用Dimensions获取屏幕宽度）
    <View style={{ width: 350, height: 350, overflow: 'hidden' }}>
      <CameraView
        style={{ flex: 1, transform: [{ scale: 1.3 }] }} // 缩放调整取景区域，保证画面居中
        facing="back"
      />
    </View>
  );
}

方法二：原生预览尺寸适配法 #

通过获取相机支持的预览尺寸，筛选接近1:1的规格，实现无裁剪的原生方形预览：

import { View } from 'react-native';
import { CameraView, Camera } from 'expo-camera';
import { useEffect, useState } from 'react';

export default function SquareCamera() {
  const [squarePreviewSize, setSquarePreviewSize] = useState(null);

  useEffect(() => {
    const fetchSquarePreviewSize = async () => {
      // 获取后置摄像头支持的所有预览尺寸
      const allSizes = await Camera.getAvailablePreviewSizesAsync('back');
      // 筛选宽高比最接近1:1的尺寸
      const targetSize = allSizes.find(size => 
        Math.abs(size.width / size.height - 1) < 0.1
      );
      setSquarePreviewSize(targetSize);
    };
    fetchSquarePreviewSize();
  }, []);

  if (!squarePreviewSize) return null;

  return (
    <CameraView
      style={{ width: '100%', aspectRatio: 1 }}
      cameraPreviewSize={squarePreviewSize}
      facing="back"
    />
  );
}

注意事项 #

• 容器裁剪法中，scale值需根据设备和取景需求调整，避免主体被裁掉。
• 原生尺寸适配法中，部分设备可能没有完全1:1的预览尺寸，选择差异最小的即可，视觉上基本一致。
• 确保已在app.json中配置相机权限：

"expo": {
  "permissions": ["CAMERA"]
}

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