React Native实现删除重复照片功能是否无需复杂编码？

核心逻辑 #

放弃对比URI/文件名，转而计算照片内容哈希值——相同内容的照片哈希值完全一致，不管是通过WhatsApp转发还是邮件保存的副本，都能被准确识别。

分步实现 #

1. 依赖库选择 #

用两个轻量且高效的库：

• expo-media-library：用于访问设备相册、获取照片信息及执行删除操作（原生RN项目也可兼容）
• react-native-fast-image-hash：快速生成图片的内容哈希值，比手动处理像素数据效率高很多

2. 安装依赖 #

# Expo 项目
npx expo install expo-media-library react-native-fast-image-hash

# 原生React Native项目
npm install expo-media-library react-native-fast-image-hash
cd ios && pod install && cd ..

3. 申请相册权限 #

必须先获取相册读写权限才能操作：

import * as MediaLibrary from 'expo-media-library';

const requestAlbumPermissions = async () => {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  return status === 'granted';
};

4. 获取所有照片并生成哈希值 #

遍历相册中的所有照片，为每张生成唯一的内容哈希：

import ImageHash from 'react-native-fast-image-hash';

const fetchPhotosWithHash = async () => {
  const hasPermission = await requestAlbumPermissions();
  if (!hasPermission) return [];

  // 获取所有照片，按创建时间排序
  const { assets } = await MediaLibrary.getAssetsAsync({
    mediaType: 'photo',
    sortBy: [MediaLibrary.SortBy.creationTime],
  });

  const photosWithHash = [];
  for (const asset of assets) {
    try {
      // 生成SHA-256哈希值，稳定性高
      const contentHash = await ImageHash.hash(asset.uri, 'sha256');
      photosWithHash.push({
        id: asset.id,
        uri: asset.uri,
        hash: contentHash,
        createTime: asset.creationTime,
      });
    } catch (err) {
      console.warn(`生成照片${asset.id}哈希失败:`, err);
    }
  }
  return photosWithHash;
};

5. 识别重复照片 #

按哈希值分组，每组中除了最早创建的照片，其余标记为重复项：

const identifyDuplicates = (photos) => {
  const hashGroups = {};
  // 按哈希值归类照片
  photos.forEach(photo => {
    hashGroups[photo.hash] = [...(hashGroups[photo.hash] || []), photo];
  });

  // 提取重复项（保留每组中最早的照片，其余为重复）
  const duplicates = [];
  Object.values(hashGroups).forEach(group => {
    if (group.length > 1) {
      // 按创建时间升序，取第2个及以后的照片
      group.sort((a, b) => a.createTime - b.createTime);
      duplicates.push(...group.slice(1));
    }
  });
  return duplicates;
};

6. 删除重复照片 #

调用MediaLibrary的API删除标记的重复项：

const removeDuplicates = async (duplicatePhotos) => {
  if (duplicatePhotos.length === 0) return;

  const assetIds = duplicatePhotos.map(photo => photo.id);
  try {
    await MediaLibrary.deleteAssetsAsync(assetIds);
    console.log(`成功删除${duplicatePhotos.length}张重复照片`);
  } catch (err) {
    console.error('删除重复照片失败:', err);
  }
};

7. 整合完整流程 #

const handleDuplicateCleanup = async () => {
  const photos = await fetchPhotosWithHash();
  const duplicates = identifyDuplicates(photos);
  
  // 建议先展示重复照片列表给用户确认，再执行删除
  // 比如弹出确认框，显示重复数量，用户确认后再调用removeDuplicates
  await removeDuplicates(duplicates);
};

关键注意点 #

• 性能优化：如果相册照片超过1000张，建议分批生成哈希值，避免UI卡顿
• 用户确认：删除前必须让用户预览重复照片，绝对不能直接静默删除
• 哈希冲突：虽然概率极低，但可以额外对比照片的文件大小、分辨率，进一步降低误判概率
• 平台兼容：iOS和Android的权限弹窗逻辑有差异，测试时要覆盖两个平台

内容的提问来源于stack exchange，提问作者Pedro-Goncal