
在 React Native 中使用 react-native-vision-camera 时,即使设置 orientation="landscape-left",因应用锁定竖屏导致实际拍摄仍为竖屏方向;本文提供兼容 Android/iOS 的可靠解决方案:通过后处理旋转图像而非依赖 Camera 组件的 orientation 属性。
在 react native 中使用 `react-native-vision-camera` 时,即使设置 `orientation="landscape-left"`,因应用锁定竖屏导致实际拍摄仍为竖屏方向;本文提供兼容 android/ios 的可靠解决方案:通过后处理旋转图像而非依赖 camera 组件的 orientation 属性。
orientation 属性在 Camera 组件中仅影响预览层的 UI 渲染方向,并不改变底层传感器捕获的原始图像方向。尤其当应用强制锁定为 portrait(如通过 expo-app-loading 或原生配置禁用屏幕旋转)时,orientation 不会触发硬件级横屏拍摄——这是 react-native-vision-camera 当前的设计限制(GitHub Issue #2330 已确认该行为)。
因此,正确做法是:先以默认方向拍摄(即自然竖屏),再在 takePhoto() 后对返回的图片数据进行程序化旋转。推荐使用 react-native-vision-camera 自带的 PhotoFile API 获取本地路径,并结合 react-native-image-rotate(轻量、无原生依赖)或 Canvas 方式完成旋转:
✅ 推荐方案(使用 react-native-image-rotate):
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk,(2) 使用 useChat hook 实现聊天完成。
npx expo install react-native-image-rotate # 或 yarn add react-native-image-rotate
import { rotateImage } from 'react-native-image-rotate';
const takePhoto = async () => {
if (!camera.current) return;
try {
const photo = await camera.current.takePhoto({
// 注意:此处不依赖 orientation,保持默认
flash: 'off',
qualityPrioritization: 'quality',
});
// 旋转 90° 实现 landscape-left 效果(顺时针)
const rotatedUri = await rotateImage({
uri: photo.path,
degree: 90, // landscape-left → 顺时针转90°
outputFormat: 'jpeg',
quality: 0.9,
});
// rotatedUri 即为横屏图像路径,可用于展示或上传
console.log('Landscape photo saved at:', rotatedUri);
} catch (err) {
console.error('Photo capture failed:', err);
}
};⚠️ 注意事项:
- degree: 90 对应 landscape-left(设备左边缘朝上),若需 landscape-right,请设为 -90 或 270;
- 图像旋转应在 takePhoto() 成功回调中立即执行,避免用户感知延迟;
- 确保 photo.path 是本地文件路径(非 base64),否则 rotateImage 将失败;
- 在 Expo 开发环境(EAS Build)中需确保 android.permissions 包含 WRITE_EXTERNAL_STORAGE(SDK 49+ 可能无需显式声明,但建议验证);
- iOS 上 react-native-image-rotate 100% 兼容;Android 需 SDK ≥ 21(对应 RN 0.68+)。
? 补充说明:若项目无法引入额外依赖,可采用 Canvas 方式(适用于 Web 环境或自定义原生模块),但在 React Native 中不可直接使用浏览器 HTMLCanvasElement——前述 StackOverflow 示例仅适用于 Web,不适用于 RN。务必使用专为 RN 设计的图像处理库。
综上,放弃依赖 Camera 的 orientation 属性,改用拍摄后旋转,是当前最稳定、跨平台、可维护的实践方案。

















