React Native(TypeScript)转大字节数组为Base64时栈溢出问题

错误原因 #

你的代码中String.fromCharCode(...new Uint8Array(buffer))这一行是问题根源：当Uint8Array长度超过10万时，展开运算符会将十万个元素作为独立参数传递给String.fromCharCode，超出了JS引擎的函数参数数量上限，触发Maximum call stack size exceeded错误。

解决方案 #

方案1：分块处理Uint8Array #

将大数组拆分为小块逐个转换，避免一次性传递过多参数：

const response = await fetch(`API URL`, {
  method: "GET",
  headers: {
    Authorization: `Bearer ${authToken}`,
    Accept: "*/*",
  },
});
if (!response.ok) {
  throw new Error("Network response was not ok");
}
const buffer = await response.arrayBuffer();
const uint8Array = new Uint8Array(buffer);
let rawStr = '';
const chunkSize = 1000; // 可根据性能调整块大小

for (let i = 0; i < uint8Array.length; i += chunkSize) {
  const chunk = uint8Array.slice(i, i + chunkSize);
  rawStr += String.fromCharCode(...chunk);
}

const base64String = Base64.btoa(rawStr);
setDataURL(`data:image/png;base64,${base64String}`);

方案2：利用Blob和FileReader（推荐） #

直接将响应转为Blob，通过原生API生成DataURL，无需手动处理数组：

const response = await fetch(`API URL`, {
  method: "GET",
  headers: {
    Authorization: `Bearer ${authToken}`,
    Accept: "*/*",
  },
});
if (!response.ok) {
  throw new Error("Network response was not ok");
}
const blob = await response.blob();
const reader = new FileReader();

reader.onloadend = () => {
  setDataURL(reader.result as string);
};
reader.readAsDataURL(blob);

方案3：使用Buffer（简洁高效） #

React Native 0.60+默认支持Buffer，可直接转换：

const response = await fetch(`API URL`, {
  method: "GET",
  headers: {
    Authorization: `Bearer ${authToken}`,
    Accept: "*/*",
  },
});
if (!response.ok) {
  throw new Error("Network response was not ok");
}
const buffer = await response.arrayBuffer();
const base64String = Buffer.from(buffer).toString('base64');
setDataURL(`data:image/png;base64,${base64String}`);

方案对比 #

• 方案1：纯JS实现，无额外依赖，适合轻量场景，性能略逊
• 方案2：原生API处理大文件更高效，代码简洁，无需手动拼接字符串
• 方案3：代码最简洁，性能最优，需确保React Native环境支持Buffer（现代版本均支持）

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