react-native-image-picker调用launchImageLibrary遇iCloud图片异常求助

问题复现 #

当iCloud存储优化开启，选择存储在iCloud中的图片时，launchImageLibrary返回结果的height和width字段为0，无预期错误信息返回；开启蜂窝数据后图片会自动下载，但无任何下载过程反馈。返回示例：

fileName: "blabla.jpg"
height: 0
type: "image/jpg"
uri: "file:///var/mobile/Containers/Data/Application/blabla.jpg"
width: 0

调用代码：

const result = await launchImageLibrary(
  {
    mediaType: 'photo',
    includeBase64: true,
    maxHeight: 600,
    maxWidth: 600,
  },
  val => {
    console.log(val, 'callback response');
  },
);
console.log(result, 'response');

环境版本 #

• react-native: 0.67.3
• react-native-image-picker: ^4.8.4
• react: 17.0.2

解决办法 #

1. 手动获取图片尺寸（临时修复） #

依赖库返回的尺寸无效时，可通过第三方工具或原生逻辑读取图片真实尺寸，示例使用react-native-image-size：

import ImageSize from 'react-native-image-size';

// 获取图片结果后执行
if (result.height === 0 && result.width === 0) {
  try {
    const { width, height } = await ImageSize.getSize(result.uri);
    // 覆盖无效的尺寸值
    result.width = width;
    result.height = height;
  } catch (err) {
    console.error('获取图片尺寸失败:', err);
  }
}

2. 添加下载状态提示 #

由于库自动下载iCloud图片但无反馈，可在调用前后增加加载状态：

import { Alert, ActivityIndicator, View } from 'react-native';

// 调用前开启加载状态
setIsLoading(true);
try {
  const result = await launchImageLibrary(/* 你的配置项 */);
  
  // 针对iCloud图片的延迟处理，等待下载完成
  if (result.height === 0 && result.width === 0) {
    // 可根据实际情况调整延迟时长，或通过文件存在性检查替代
    await new Promise(resolve => setTimeout(resolve, 2000));
    const { width, height } = await ImageSize.getSize(result.uri);
    result.width = width;
    result.height = height;
  }
} catch (err) {
  Alert.alert('错误', '选择图片失败');
} finally {
  // 关闭加载状态
  setIsLoading(false);
}

// 渲染加载遮罩
{isLoading && (
  <View style={{ flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'rgba(0,0,0,0.5)' }}>
    <ActivityIndicator size="large" color="#fff" />
  </View>
)}

3. 升级库版本或更换替代方案 #

• 尝试升级react-native-image-picker至最新稳定版，新版本可能修复了iCloud图片的尺寸读取逻辑问题。
• 若升级后问题仍存在，可更换其他库：
  • react-native-document-picker：支持直接选择iCloud文件，可自行处理图片下载与尺寸解析
  • expo-image-picker：若项目基于Expo，该库对iCloud资源的支持更完善

4. 检查iOS权限配置 #

确保Info.plist中添加了必要的iCloud及相册权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册以保存图片</string>
<key>NSiCloudUsageDescription</key>
<string>需要访问iCloud以获取存储的图片</string>

内容的提问来源于stack exchange，提问作者Ömer Avşar