React Native + Expo实现截图与文本/链接同时分享的问题求助

Expo环境下（expo-sharing + react-native-view-shot） #

你之前的尝试里，错误地试图把文本写入图片文件，这会直接损坏图片，肯定没法正常分享。另外Android 10+开始限制了file:// URI的跨应用访问，必须用content URI才行。

正确实现代码：

import React, { useRef } from 'react';
import { View, Button, Platform } from 'react-native';
import ViewShot from 'react-native-view-shot';
import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

const ShareScreen = () => {
  const viewShotRef = useRef(null);

  const onShare = async () => {
    try {
      // 捕获当前界面截图
      const screenshotUri = await viewShotRef.current.capture({
        format: 'png',
        quality: 0.9,
      });

      // Android需要转换为content URI，iOS直接用原URI即可
      const shareUri = Platform.OS === 'android' 
        ? await FileSystem.getContentUriAsync(screenshotUri) 
        : screenshotUri;

      // 同时传递图片和文本
      await Sharing.shareAsync(shareUri, {
        message: '这是我分享的截图和文本内容！',
        dialogTitle: '选择分享平台',
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <ViewShot ref={viewShotRef} style={{ flex: 1 }}>
      {/* 你的应用界面内容 */}
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="分享截图+文本" onPress={onShare} />
      </View>
    </ViewShot>
  );
};

export default ShareScreen;

关键点：

• 不要修改图片文件的内容，文本直接通过Sharing.shareAsync的message参数传递。
• Android必须用FileSystem.getContentUriAsync转换URI，否则会因为权限问题无法分享。
• 部分社交平台需要dialogTitle参数来正常显示分享弹窗。

React Native核心Share模块（兼容裸RN和Expo） #

你之前用核心Share时，Android端的URI格式不对，而且部分平台（比如微信）只会读取message字段，忽略url参数，需要把文本和URI合并到message里。

正确实现代码：

import React, { useRef } from 'react';
import { View, Button, Share, Platform } from 'react-native';
import ViewShot from 'react-native-view-shot';
import * as FileSystem from 'expo-file-system';

const ShareScreen = () => {
  const viewShotRef = useRef(null);

  const takeAndShareScreenshot = async () => {
    try {
      // 捕获截图
      const tempUri = await viewShotRef.current.capture({
        format: 'png',
        quality: 0.9,
      });

      // 把截图保存到持久化目录，避免临时文件被清理
      const savePath = `${FileSystem.documentDirectory}shared_screenshot.png`;
      await FileSystem.copyAsync({
        from: tempUri,
        to: savePath,
      });

      // 转换为平台兼容的URI
      const shareUri = Platform.OS === 'android' 
        ? await FileSystem.getContentUriAsync(savePath) 
        : `file://${savePath}`;

      // 构建分享参数
      const shareOptions = {
        title: '分享我的截图',
        message: '这是我的截图分享内容！',
        url: shareUri,
      };

      // Android部分平台需要把文本和URI合并到message里
      if (Platform.OS === 'android') {
        shareOptions.message = `${shareOptions.message}\n${shareUri}`;
      }

      await Share.share(shareOptions);

      // 分享完成后删除临时文件，节省空间
      await FileSystem.deleteAsync(savePath);
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <ViewShot ref={viewShotRef} style={{ flex: 1 }}>
      {/* 你的应用界面内容 */}
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="分享截图+文本" onPress={takeAndShareScreenshot} />
      </View>
    </ViewShot>
  );
};

export default ShareScreen;

关键点：

• 把截图保存到documentDirectory，避免分享过程中临时文件被系统清理。
• Android必须转换为content URI，否则其他应用无法访问图片。
• 针对Android平台，将文本和URI合并到message，确保所有社交平台都能读取到完整内容。

额外注意事项 #

1. 权限：Expo环境下确保已安装expo-file-system、expo-sharing和react-native-view-shot；裸RN环境需要手动链接react-native-view-shot，并在AndroidManifest.xml中添加文件读写权限（Expo会自动处理权限）。
2. 平台差异：不同社交平台对分享内容的解析逻辑不同，比如部分平台可能只支持单一类型内容，这是平台限制，无法通过代码完全解决，建议测试目标平台的表现。
3. 临时文件：分享完成后记得删除保存的截图，避免占用设备存储空间。

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