使用react-native-vision-camera转Blob报错：Response状态码0超出范围

问题重现 #

使用react-native-vision-camera拍摄照片后，通过fetch读取本地文件URI转Blob时出现错误：

Failed to construct 'Response': The status provided (0) is outside the range [200, 599] while fetch

此前功能正常，无代码变更情况下突然出现该问题。

核心原因 #

React Native中fetch处理file://协议的本地文件时，部分场景（如文件权限变更、路径解析异常、库版本兼容问题）会返回状态码0，而浏览器标准中Response的状态码必须在200-599区间，导致构造Response实例失败。

解决方案 #

放弃用fetch读取本地文件，改用React Native专用的文件系统库直接读取文件并转换为base64，避免fetch的兼容性问题。以下是两种常见实现方式：

方式1：使用expo-file-system（Expo项目） #

1. 安装依赖：

npx expo install expo-file-system

2. 修改代码，直接读取文件为base64：

import * as FileSystem from 'expo-file-system';

// 替换原有的getBlob和blobToBase64函数
const convertPhotoToBase64 = useCallback(async (fileUri) => {
  try {
    // 直接读取本地文件为base64，无需转Blob
    const base64 = await FileSystem.readAsStringAsync(`file://${fileUri}`, {
      encoding: FileSystem.EncodingType.Base64,
    });
    // 拼接data URI格式（如果需要）
    return `data:image/jpeg;base64,${base64}`;
  } catch (err) {
    console.log(`转换图片为base64失败 - ${err}`);
    throw err;
  }
}, []);

const handleCapture = async () => {
  if (takingPic) return;
  setTakingPic(true);

  try {
    if (cameraRef.current !== null) {
      const photo = await cameraRef.current.takePhoto({});
      const finalImage = await convertPhotoToBase64(photo?.path);
      console.log("finalImage=", finalImage);
      props.onPicture(finalImage);
    }
  } catch (e) {
    console.log("handleCapture", e);
  } finally {
    setTakingPic(false); // 无论成功失败都重置状态
  }
};

方式2：使用react-native-fs（裸React Native项目） #

1. 安装依赖：

npm install react-native-fs --save
# 或 yarn add react-native-fs

2. 实现转换函数：

import RNFS from 'react-native-fs';

const convertPhotoToBase64 = useCallback(async (fileUri) => {
  try {
    const base64 = await RNFS.readFile(`file://${fileUri}`, 'base64');
    return `data:image/jpeg;base64,${base64}`;
  } catch (err) {
    console.log(`转换图片为base64失败 - ${err}`);
    throw err;
  }
}, []);

// handleCapture函数修改同方式1

额外排查点 #

如果坚持使用fetch，可检查以下内容：

• 确认photo.path返回的路径是否正确，打印完整URI后手动验证文件是否存在
• 检查应用的文件读写权限是否正常（Android需READ_EXTERNAL_STORAGE/WRITE_EXTERNAL_STORAGE，iOS需相册权限）
• 升级react-native-vision-camera到最新稳定版本，排查是否为库的兼容性bug

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