React Native Vision Camera 预览画面变形问题求助

我之前也踩过Vision Camera预览变形的坑，太懂这种明明调了比例还是不对的烦躁了！咱们一步步来排查解决：

首先，问题的核心大概率是你硬写的4/3比例和相机设备原生支持的比例不匹配——不同的前置广角相机，原生的宽高比可能不是4/3（比如有些是16:9、3:2甚至其他），这时候你强制给容器设4/3，相机输出的画面就会被拉伸/压缩变形。

给你几个具体的解决步骤，亲测有效：

1. 先搞清楚你的相机设备原生支持的比例 #

在获取到device之后，先打印一下它的aspectRatio值，看看真实比例是多少：

const device = useCameraDevice("front", {
  physicalDevices: ["wide-angle-camera"],
});
console.log("相机原生比例：", device?.aspectRatio);

比如我之前测试的某款前置相机，原生比例是1.333（也就是4/3），但另一款是1.777（16:9），硬写固定值肯定会出问题。

2. 动态匹配相机原生比例来设置样式 #

不要在StyleSheet里写死aspectRatio，而是用设备的原生比例动态设置：

// 动态获取相机比例，没有的话 fallback 到4/3
const cameraAspectRatio = device?.aspectRatio ?? 4/3;

// 然后在Camera组件的样式里用这个动态值
<Camera
  ref={camera}
  resizeMode={"cover"}
  style={[styles.camera, { aspectRatio: cameraAspectRatio }]}
  photo={true}
  device={device}
  isActive={showCamera}
/>

这样容器的比例和相机输出的画面比例完全一致，就不会变形了。

3. 调整resizeMode适配你的需求 #

• 如果你希望画面填满容器且保持比例（裁剪超出部分），就用resizeMode="cover"（这也是你现在用的，比例匹配后就不会变形）
• 如果你希望完整显示画面、不裁剪但允许留黑边，就换成resizeMode="contain"
• 别用resizeMode="stretch"，那会强制拉伸画面，肯定变形

最后给你修改后的完整代码参考 #

import { View, StyleSheet, useRef } from 'react-native';
import { Camera, useCameraDevice } from 'react-native-vision-camera';

export default function CameraMolecula() {
  const camera = useRef(null);
  const showCamera = true; // 这里根据你的实际状态变量调整

  const device = useCameraDevice("front", {
    physicalDevices: ["wide-angle-camera"],
  });

  // 动态获取相机原生比例， fallback 到4/3
  const cameraAspectRatio = device?.aspectRatio ?? 4/3;

  return (
    <View style={styles.border}>
      {/* 加个判断，避免device为null时渲染Camera报错 */}
      {device && (
        <Camera
          ref={camera}
          resizeMode={"cover"}
          style={[styles.camera, { aspectRatio: cameraAspectRatio }]}
          photo={true}
          device={device}
          isActive={showCamera}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  border: {
    borderColor: "grey",
    borderWidth: 5,
    alignSelf: 'center', // 可选，让带边框的容器居中显示
  },
  camera: {
    width: "80%",
    // 这里不再写固定aspectRatio，用动态值覆盖
  },
});

另外还要注意：一定要等device加载完成后再渲染Camera组件（就是代码里的{device && ...}判断），不然可能会出现临时的变形或者报错。

备注：内容来源于stack exchange，提问作者ntx2