React Native Expo应用中无法使用blob.text()的问题咨询

问题详情 #

在React Native Expo应用中调用Blob.text()方法时，出现以下错误：

Unhandled promise rejection Error: "testBlob.text is not a function. (In 'testBlob.text()', 'testBlob.text' is undefined)" in _callee$ << tryCatch <<  << asyncGeneratorStep

相同的Blob创建和调用逻辑在Chrome开发者控制台中可正常运行，但在Expo应用中报错。

已尝试操作 #

• 通过Blob构造函数从字符串创建新的Blob对象，调用text()方法尝试还原原字符串

预期与实际结果 #

• 预期：调用blob.text()应返回创建Blob时所用的字符串
• 实际：text()方法未被识别，触发上述错误

原因 #

React Native（包括Expo）默认使用的Hermes引擎或JSC引擎，其Blob对象的实现并未完全对齐浏览器标准，Blob.text()是较新的浏览器API，在这些移动JS环境中没有被支持，因此会出现方法不存在的问题。

解决方法 #

方法1：使用FileReader替代 #

这是兼容所有React Native版本的通用方案，通过FileReader的readAsText方法读取Blob内容：

const readBlobText = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
    reader.readAsText(blob);
  });
};

// 使用示例
const testBlob = new Blob(["Hello Expo"], { type: "text/plain" });
readBlobText(testBlob)
  .then(text => console.log(text)) // 输出 "Hello Expo"
  .catch(err => console.error(err));

方法2：使用expo-file-system（Expo专属） #

如果你的项目基于Expo，可以使用官方提供的expo-file-system库来处理：

1. 先安装依赖：

npx expo install expo-file-system

2. 读取Blob内容的代码：

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

const readBlobText = async (blob) => {
  const base64Str = await FileSystem.readAsStringAsync(blob, {
    encoding: FileSystem.EncodingType.Base64
  });
  return Buffer.from(base64Str, 'base64').toString('utf8');
};

// 使用示例
const testBlob = new Blob(["Hello Expo File System"], { type: "text/plain" });
readBlobText(testBlob)
  .then(text => console.log(text))
  .catch(err => console.error(err));

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