如何在React Native中用CameraRoll判断图片的横竖屏模式

CameraRoll返回的width/height为空、orientation字段不准确是常见问题，要准确判断照片拍摄时的原始横竖屏，核心是读取照片的EXIF元数据，以下是具体解决方案：

1. 理解EXIF Orientation字段的含义 #

照片的原始拍摄方向存储在EXIF的Orientation字段中，不同值对应不同的旋转状态，可反推拍摄时的握持模式：

• 1/3：拍摄时手机横向握持（原始横屏），其中3是照片旋转180度后的状态
• 6/8：拍摄时手机纵向握持（原始竖屏），6需顺时针转90度、8需逆时针转90度才能正常显示
• 0/其他值：CameraRoll未正确获取EXIF，需单独处理

2. 使用EXIF解析库获取准确数据 #

CameraRoll本身无法可靠返回完整EXIF信息，推荐使用react-native-exif（原生实现，支持iOS/Android）来读取照片的元数据：

安装依赖 #

npm install react-native-exif --save
# 或使用yarn
yarn add react-native-exif

（RN 0.60+版本自动完成原生链接，低版本需手动执行react-native link react-native-exif）

代码实现 #

import Exif from 'react-native-exif';

/**
 * 判断照片拍摄时的原始横竖屏
 * @param {string} photoUri - CameraRoll返回的照片uri
 * @returns {boolean} 是否为原始竖屏模式
 */
const checkOriginalOrientation = async (photoUri) => {
  try {
    // 获取照片EXIF元数据
    const exifData = await Exif.getExif(photoUri);
    const orientation = exifData.Orientation; // 注意字段名大写O，不同库可能有差异

    switch (orientation) {
      case 1:
      case 3:
        return false; // 原始横屏
      case 6:
      case 8:
        return true; // 原始竖屏
      default:
        // EXIF读取失败时， fallback到图片实际宽高判断
        const { width, height } = await Exif.getImageSize(photoUri);
        return height > width;
    }
  } catch (error) {
    console.error('读取照片信息失败:', error);
    // 极端情况默认按宽高判断
    const [width, height] = await Image.getSize(photoUri);
    return height > width;
  }
};

// 调用示例（从CameraRoll获取uri后使用）
const photoUri = 'file:///example-path';
checkOriginalOrientation(photoUri).then(isOriginalPortrait => {
  console.log(`照片原始模式：${isOriginalPortrait ? '竖屏' : '横屏'}`);
});

3. 补充说明 #

• 部分照片可能被编辑过（如手动旋转），此时EXIF的Orientation依然会保留拍摄时的原始方向，是判断的最可靠依据
• 如果不想依赖第三方库，也可以通过原生模块直接读取EXIF，但开发成本较高，推荐使用成熟的第三方库
• 若使用exif-js（Web端库），需注意RN环境下的适配问题，优先选择原生实现的react-native-exif

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