Expo实现Supabase存储图片分享至Instagram Story遇黑屏问题求助

核心问题分析 #

当前代码将JSON格式字符串存入剪贴板，但iOS平台上Instagram要求分享数据需以**Property List (plist)**格式序列化，而非JSON；同时需为剪贴板数据指定正确的UTI类型，才能被Instagram识别读取，这是导致图片黑屏的关键原因。

具体修复步骤 #

1. 替换剪贴板数据格式为plist #

将原JSON序列化的剪贴板数据，改为手动构造plist格式字符串：

const plist = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.instagram.sharedSticker.backgroundImage</key>
    <string>data:${mimetype};base64,${base64data}</string>
</dict>
</plist>`;

2. 使用Expo Clipboard指定UTI写入数据 #

安装并使用expo-clipboard的高级API，设置正确的UTI类型，确保Instagram能识别剪贴板内容：

import * as Clipboard from 'expo-clipboard';

// 替换原Clipboard.setStringAsync(data)为以下代码
await Clipboard.setAsync(plist, {
  uti: 'com.instagram.sharedSticker',
});

3. 可选：改用Expo FileSystem处理图片（规避Blob兼容性问题） #

若仍存在异常，可替换原fetch+Blob逻辑为Expo FileSystem下载读取图片，确保base64数据精准：

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

const handleShare = async () => {
  const supported = await Linking.canOpenURL('instagram-stories://app');
  if (!supported) return;

  // 下载图片到本地文档目录
  const localFileName = `share-image.${url.split('.').pop()}`;
  const localUri = `${FileSystem.documentDirectory}${localFileName}`;
  await FileSystem.downloadAsync(url, localUri);

  // 读取本地图片为base64
  const base64data = await FileSystem.readAsStringAsync(localUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  // 手动指定MIME类型（避免Supabase返回Content-Type不正确的情况）
  const mimetype = url.endsWith('png') ? 'image/png' : 'image/jpeg';

  // 构造plist数据
  const plist = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.instagram.sharedSticker.backgroundImage</key>
    <string>data:${mimetype};base64,${base64data}</string>
</dict>
</plist>`;

  // 写入剪贴板并指定UTI
  await Clipboard.setAsync(plist, {
    uti: 'com.instagram.sharedSticker',
  });

  // 打开Instagram Story
  const urlScheme = `instagram-stories://share?source_application=${MY_APP_ID}`;
  await Linking.openURL(urlScheme);
};

4. 验证Bundle ID正确性 #

确认MY_APP_ID为你应用的iOS Bundle ID（可在Expo项目app.json的ios.bundleIdentifier字段查看），格式类似com.yourcompany.yourapp。

额外注意事项 #

• 确保图片尺寸符合Instagram Story要求（建议1080x1920像素，9:16比例）
• 若Supabase图片URL带临时签名，需确保分享时签名仍有效
• 测试需使用真机，模拟器可能存在剪贴板或URL Scheme兼容性问题

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