Expo托管工作流中如何同时分享地图生成图片与文本？

1. Android 平台：使用 expo-intent-launcher 发送分享意图 #

Android系统的Intent支持同时携带文本和媒体内容，通过expo-intent-launcher可直接调用系统分享面板，同时传递图片URI和文本内容。

步骤：

• 安装依赖：expo install expo-intent-launcher expo-file-system
• 代码示例：

import * as IntentLauncher from 'expo-intent-launcher';
import * as FileSystem from 'expo-file-system';

// 假设你已获取生成的图片URI（base64或本地URI均可）
async function shareImageWithText(imageUri, text) {
  // 若图片是base64格式，先保存到本地缓存
  const localUri = imageUri.startsWith('data:') 
    ? await FileSystem.writeAsStringAsync(
        FileSystem.cacheDirectory + 'shared-map.jpg',
        imageUri.split(',')[1],
        { encoding: FileSystem.EncodingType.Base64 }
      )
    : imageUri;

  // 构建并启动分享Intent
  await IntentLauncher.startActivityAsync('android.intent.action.SEND', {
    type: 'image/jpeg',
    extras: {
      'android.intent.extra.TEXT': text,
      'android.intent.extra.STREAM': localUri,
    },
  });
}

2. iOS 平台：两种实现方式 #

iOS的UIActivityViewController支持同时分享文本和图片，但expo-sharing暂不直接支持附加文本，可通过以下两种方式实现：

方法A：剪贴板辅助填充文本 #

先将文本复制到剪贴板，再分享图片，同时提示用户粘贴文本（实现简单，体验略有限制）

import * as Sharing from 'expo-sharing';
import * as Clipboard from 'expo-clipboard';
import { Alert } from 'react-native';

async function shareImageWithText(imageUri, text) {
  await Clipboard.setStringAsync(text);
  await Sharing.shareAsync(imageUri);
  Alert.alert('提示', '分享文本已复制到剪贴板，可在分享框中粘贴');
}

方法B：自定义Expo模块（托管工作流兼容） #

若需要更流畅的原生体验，可开发轻量Expo自定义模块，封装iOS的UIActivityViewController以同时传递文本和图片：

• 按照Expo官方模块开发文档创建模块项目
• 在iOS原生代码中实现分享逻辑，接收图片URI和文本参数，启动UIActivityViewController
• 将模块发布到npm后，在你的Expo托管项目中安装使用

3. 跨平台通用方案：生成带文本的合成图片 #

直接把需要分享的文本叠加到地图图片上，再分享合成后的图片，无需依赖平台特定API：

• 安装依赖：expo install expo-image-manipulator
• 代码示例（可结合expo-font加载自定义字体）：

import * as ImageManipulator from 'expo-image-manipulator';

async function addTextToImage(imageUri, text) {
  const manipulatedImage = await ImageManipulator.manipulateAsync(
    imageUri,
    [
      {
        drawText: {
          text: text,
          x: 20,
          y: 20,
          color: 'white',
          fontSize: 16,
          // 可选：加载自定义字体后设置
          // font: 'CustomFontName'
        },
      },
    ],
    { format: 'jpeg' }
  );
  return manipulatedImage.uri;
}

// 使用时先合成图片再分享
const imageWithTextUri = await addTextToImage(originalMapImageUri, shareText);
await Sharing.shareAsync(imageWithTextUri);

内容的提问来源于stack exchange，提问作者Lucas Gardini Dias