React Native Vision Camera照片方向异常及优化方案咨询

针对你在Expo SDK 46（RN 0.69.9）使用react-native-vision-camera@2.15.4遇到的拍照方向始终为6、预览和保存后方向错误的问题，以下是无需手动处理旋转逻辑的解决方案：

1. 利用组件自带的photoOrientation属性强制照片方向 #

react-native-vision-camera的Camera组件提供了photoOrientation属性，专门用于控制拍摄后照片的输出方向，直接覆盖设备传感器返回的元数据方向。配置方式如下：

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

export default function CameraScreen() {
  const devices = useCameraDevices('wide-angle-camera');
  const device = devices.back;
  const camera = useRef(null);

  if (device == null) return null;

  const takePicture = async () => {
    if (camera.current == null) return;
    const photo = await camera.current.takePhoto({
      orientation: 'portrait',
    });
    // 此时照片元数据方向已修正，可直接处理保存
  };

  return (
    <>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        orientation="portrait" // 强制预览界面为竖屏
        photoOrientation="portrait" // 强制生成的照片为竖屏方向，修正元数据Orientation
      />
      {/* 拍照按钮 */}
    </>
  );
}

该属性会直接调整照片的元数据方向，无需后续手动旋转处理。

2. 检查Expo项目的全局方向配置 #

确保Expo项目的app.json中全局方向配置未限制组件的方向控制能力，若需要支持多镜头同时允许拍照强制竖屏，可将全局方向设为"default"：

{
  "expo": {
    "orientation": "default",
    // 其他项目配置项...
  }
}

全局方向设为default后，Camera组件的orientation和photoOrientation属性可以更精准地独立控制预览与拍照方向，不受全局锁死方向的干扰。

3. 升级到兼容的vision-camera版本 #

react-native-vision-camera@2.15.4可能存在部分设备的方向传感器兼容bug，你可以尝试升级到与Expo SDK 46兼容的更高版本（如2.16.5，需确认RN 0.69.9的兼容性），新版本通常会修复方向元数据异常问题。升级命令：

npm install react-native-vision-camera@2.16.5
# 或
yarn add react-native-vision-camera@2.16.5

升级后重新运行Expo项目，测试拍照方向是否恢复正常。

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