如何在React Native中为拍摄的JPEG照片写入EXIF信息？

当然有简便的方法！在React Native中给照片写入EXIF信息（比如标题、描述这类元数据），主要依赖成熟的第三方库，分裸React Native项目和Expo项目两种场景来实现，下面是具体方案：

一、裸React Native项目（非Expo） #

1. 依赖选择 #

推荐组合使用react-native-exif（专门处理EXIF读写）和react-native-image-picker（用于拍照/选择图片），前者提供直接的EXIF写入API，后者负责获取图片资源。

2. 安装与配置 #

首先安装依赖：

# npm
npm install react-native-exif react-native-image-picker

# yarn
yarn add react-native-exif react-native-image-picker

• iOS：进入ios目录执行pod install，并在Info.plist中添加权限配置：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机拍摄照片</string>
  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>需要访问相册保存照片</string>
  

• Android：在AndroidManifest.xml中添加权限：

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" /> <!-- Android 13+ 适配 -->
  

3. 代码示例 #

import React from 'react';
import { Button, View } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import Exif from 'react-native-exif';

const PhotoExifEditor = () => {
  const handleTakePhoto = async () => {
    // 启动相机
    ImagePicker.launchCamera(
      {
        mediaType: 'photo',
        quality: 0.8,
        saveToPhotos: false, // 先不保存，修改EXIF后再处理
      },
      async (response) => {
        if (response.didCancel) {
          console.log('用户取消拍照');
          return;
        }
        if (response.errorCode) {
          console.error('拍照错误:', response.errorMessage);
          return;
        }

        // 获取图片本地路径
        const imageUri = response.uri;
        // 定义要写入的EXIF元数据
        const exifData = {
          ImageDescription: '我的旅行照片', // 标题字段
          UserComment: '2024年5月拍摄于大理洱海', // 描述字段
        };

        try {
          // 写入EXIF信息
          await Exif.saveExif(imageUri, exifData);
          console.log('EXIF写入成功！');
          // 可选：将修改后的照片保存到相册，可借助react-native-fs等库实现
        } catch (error) {
          console.error('EXIF写入失败:', error);
        }
      }
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="拍摄并添加EXIF" onPress={handleTakePhoto} />
    </View>
  );
};

export default PhotoExifEditor;

二、Expo项目 #

如果用Expo开发，官方的expo-image-manipulator配合expo-image-picker、expo-media-library就能轻松实现，不需要额外的原生配置。

1. 安装依赖 #

expo install expo-image-manipulator expo-image-picker expo-media-library

2. 代码示例 #

import React from 'react';
import { Button, View, Alert } from 'react-native';
import { ImagePicker } from 'expo-image-picker';
import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
import * as MediaLibrary from 'expo-media-library';

const ExpoPhotoExifEditor = () => {
  const handleTakePhoto = async () => {
    // 请求相机权限
    const cameraPerm = await ImagePicker.requestCameraPermissionsAsync();
    if (!cameraPerm.granted) {
      Alert.alert('权限不足', '需要相机权限才能拍摄照片');
      return;
    }

    // 请求相册权限（用于保存修改后的照片）
    const libraryPerm = await MediaLibrary.requestPermissionsAsync();
    if (!libraryPerm.granted) {
      Alert.alert('权限不足', '需要相册权限才能保存照片');
      return;
    }

    // 启动相机拍照
    const photoResult = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 0.8,
    });

    if (!photoResult.canceled) {
      const imageUri = photoResult.assets[0].uri;
      // 修改EXIF并重新保存图片
      const manipulatedImage = await manipulateAsync(
        imageUri,
        [], // 不需要调整图片尺寸/滤镜，只修改EXIF
        {
          format: SaveFormat.JPEG, // 必须是JPEG，PNG不支持EXIF
          exif: {
            ImageDescription: 'Expo拍摄的美食照片',
            UserComment: '2024年5月打卡网红餐厅',
          },
        }
      );

      // 将修改后的照片保存到系统相册
      await MediaLibrary.saveToLibraryAsync(manipulatedImage.uri);
      Alert.alert('成功', '带自定义EXIF的照片已保存到相册');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="拍摄并添加EXIF" onPress={handleTakePhoto} />
    </View>
  );
};

export default ExpoPhotoExifEditor;

关键注意事项 #

• EXIF字段对应：标题一般用ImageDescription，描述常用UserComment，这些是EXIF标准中的字段，确保跨设备兼容性；
• 图片格式：只有JPEG格式支持EXIF，所以保存时必须指定为JPEG；
• 路径兼容性：Android上部分库可能需要将content://格式的uri转换为真实文件路径，可以用react-native-fs的方法处理；
• 权限适配：Android 13+的存储权限改为READ_MEDIA_IMAGES/WRITE_MEDIA_IMAGES，需要单独配置。

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