React Native调用fetchedFile.blob()提示is not a function报错

这个报错和M1芯片、iOS 15.5模拟器环境无关。npx初始化的新版React Native项目（0.71版本及以上）iOS端内置的fetch基于系统原生NSURLSession实现，对file://协议的本地资源返回的Response对象没有完整实现Web标准接口，缺失blob()方法。其他开发者能正常运行该写法，通常是使用了更低版本的RN、引入了兼容本地文件的fetch polyfill，或是在Android端测试（Android端内置fetch对本地file协议的blob支持更早完成适配）。

• 方案1：全版本兼容无依赖写法，用XMLHttpRequest读取本地资源生成blob，不需要安装任何第三方库，全平台通用。
  先封装通用的blob读取方法：

  const uriToBlob = (fileUri) => {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.onload = () => resolve(xhr.response)
      xhr.onerror = (err) => reject(err)
      xhr.responseType = 'blob'
      xhr.open('GET', fileUri, true)
      xhr.send(null)
    })
  }
  

  替换原有代码中的fetch逻辑即可：

  const { uri } = result.assets[0]
  const blob = await uriToBlob(uri)
  console.log('BLOB: ', blob)
  

• 方案2：如果要保留fetch().blob()的写法，先执行npm install whatwg-fetch安装Web标准兼容的fetch polyfill，在项目入口文件（通常是index.js）的最顶部加入import 'whatwg-fetch'覆盖RN内置的fetch实现，引入后执行npx react-native start --reset-cache清除缓存，重新编译项目即可生效。

注意：

1. 调用launchImageLibrary后需要先判断用户是否取消选择，再读取result.assets[0]，避免出现空值报错。
2. 如果后续需要把blob上传到服务端，不需要额外做格式转换，XMLHttpRequest、fetch等网络请求API都可以直接识别生成的blob对象。

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