React Native使用react-native-image-picker报错及Firebase图片上传问题咨询

你遇到的报错是react-native-image-picker v4.0及以上版本已完全废弃showImagePicker接口，替换为独立的launchImageLibrary（调用相册选图）和launchCamera（调用相机拍照）接口。你后续替换接口后出现的警告、上传失败问题，是因为新版本返回的参数结构、入参配置和旧版本不兼容导致。

1. 修改导入语句 #

替换旧的全量导入为按需导入需要的接口：

// 旧代码 直接删除
// import ImagePicker from 'react-native-image-picker';
// 新代码 新增，需要拍照功能可同时导入launchCamera
import { launchImageLibrary } from 'react-native-image-picker';

2. 重构selectImage方法 #

新版本入参配置已移除storageOptions字段，选图成功后的资源放在response.assets数组中，修改后的代码如下：

const selectImage = () => {
  const options = {
    maxWidth: 2000,
    maxHeight: 2000,
    quality: 0.8, // 图片压缩质量 取值0-1
    mediaType: 'photo', // 仅筛选图片文件
  };
  launchImageLibrary(options, response => {
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.errorCode) { // 旧版本的error字段已改为errorCode
      console.log('ImagePicker Error: ', response.errorMessage);
    } else if (response.assets && response.assets.length > 0) {
      const asset = response.assets[0];
      const source = { uri: asset.uri };
      console.log(source);
      setImage(source);
    }
  });
};

3. 修复上传逻辑兼容问题 #

新版本返回的uri格式、进度计算逻辑和旧版本存在差异，调整后代码如下：

const uploadImage = async () => {
  // 新增非空判断避免空路径崩溃
  if (!image?.uri) {
    Alert.alert('错误', '请先选择图片');
    return;
  }
  const { uri } = image;
  const filename = uri.substring(uri.lastIndexOf('/') + 1);
  const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
  setUploading(true);
  setTransferred(0);
  const task = storage()
    .ref(filename)
    .putFile(uploadUri);
  task.on('state_changed', snapshot => {
    // 修复进度计算错误，Progress.Bar的progress取值范围为0-1
    setTransferred(
      Math.round(snapshot.bytesTransferred / snapshot.totalBytes * 100) / 100
    );
  });
  try {
    await task;
  } catch (e) {
    console.error('上传失败：', e);
    setUploading(false);
    Alert.alert('上传失败', e.message);
    return;
  }
  setUploading(false);
  Alert.alert(
    'Photo uploaded!',
    'Your photo has been uploaded to Firebase Cloud Storage!'
  );
  setImage(null);
};

• 控制台参数警告：确认已删除旧配置中的storageOptions字段，该字段在新版本已完全废弃
• 无法唤起选图界面：iOS需要在info.plist中添加相册权限描述NSPhotoLibraryUsageDescription，如果用到拍照功能还需要添加NSCameraUsageDescription
• 图片上传失败：
  1. 先打印uploadUri确认路径是否有效，不存在空值、格式错误
  2. 检查Firebase Storage的安全规则，测试阶段可以临时修改为公开读写验证功能，规则示例：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        allow read, write: if true;
      }
    }
  }
  

  生产环境需要替换为带身份验证的规则，避免数据泄露。

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