React Native使用@twilio/conversations API发媒体图片遇TypeError求助

问题概述 #

使用@twilio/conversations@2.4.1在React Native环境发送媒体图片时，触发TypeError: Cannot read property 'content' of undefined错误，纯文本消息可正常发送。已尝试FormData、Blob、Buffer、Base64、文件URI及图片URL等格式，其中Buffer不被支持，FormData仅适用于浏览器环境。

核心原因 #

React Native的Blob实现与浏览器存在差异，Twilio JavaScript SDK在RN环境下无法正确解析Blob对象，导致内部处理媒体时找不到预期的content属性。

解决方案 #

方法一：使用ArrayBuffer替代Blob（推荐） #

将图片的Base64编码转换为ArrayBuffer，作为媒体参数传入，这是Twilio SDK在RN环境下支持的可靠格式。

1. 实现Base64转ArrayBuffer工具函数：

function base64ToArrayBuffer(base64: string): ArrayBuffer {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

2. 修改媒体消息发送逻辑：

// 从资产中获取Base64数据，并移除前缀（如"data:image/jpeg;base64,"）
const { type, fileName, base64 } = myAsset?.assets[0];
const cleanBase64 = base64.replace(/^data:image\/\w+;base64,/, '');
const mediaBuffer = base64ToArrayBuffer(cleanBase64);

const sendMediaOptions: SendMediaOptions = {
  contentType: type,
  filename: fileName,
  media: mediaBuffer,
};

conversationClient
  ?.prepareMessage()
  .setBody(newMessages[0]?.text as string)
  .setAttributes(attributes)
  .addMedia(sendMediaOptions)
  .build()
  .send();

方法二：升级Twilio SDK版本 #

@twilio/conversations@2.4.1可能存在React Native环境下的媒体处理Bug，尝试升级到最新稳定版（如3.x系列），新版本通常会修复跨环境兼容性问题。升级后重新测试媒体发送逻辑。

注意事项 #

• 确保Base64字符串已正确移除data:image/xxx;base64,前缀，否则转换会失败
• contentType需与图片实际类型匹配（如image/jpeg、image/png）
• 若使用远程图片URL，需先将其转换为Base64再处理，避免直接传入URL或Blob

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