如何在Expo版React Native中实现社交分享功能

1. 安装必要依赖 #

Expo提供了expo-sharing用于处理跨平台分享，若需要分享商品列表的截图，搭配expo-view-shot实现组件截图功能。执行以下命令安装：

npx expo install expo-sharing expo-view-shot

2. 核心实现逻辑 #

2.1 准备分享内容 #

商城商品列表的分享内容通常包含：商品名称汇总、店铺/商品列表跳转链接，可选添加商品列表截图提升吸引力。

2.2 代码示例 #

下面是完整的组件实现，包含商品列表展示、截图生成、分享触发三个核心部分：

import React, { useRef } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import { captureRef } from 'expo-view-shot';
import { shareAsync } from 'expo-sharing';

const ProductShareComponent = () => {
  // 标记商品列表组件，用于后续截图
  const productListRef = useRef(null);
  // 模拟商品数据
  const products = [
    { id: '1', name: '夏季纯棉T恤', price: '¥99' },
    { id: '2', name: '透气运动鞋', price: '¥299' },
    { id: '3', name: '休闲牛仔短裤', price: '¥159' }
  ];

  // 生成分享文本内容
  const getShareText = () => {
    const productNames = products.map(item => item.name).join('、');
    return `我挖到几款好物：${productNames}\n点击直达商城查看：https://your-mall-url.com/products`;
  };

  // 触发分享操作
  const handleShare = async () => {
    try {
      // 截取商品列表组件的截图（可选，若不需要截图可跳过此步骤）
      const screenshotUri = await captureRef(productListRef, {
        format: 'png',
        quality: 0.8, // 图片质量，0-1之间
      });

      // 调用Expo分享API
      await shareAsync(screenshotUri, {
        dialogTitle: '分享商品列表',
        message: getShareText(),
      });
    } catch (error) {
      console.error('分享失败：', error);
    }
  };

  // 若不需要截图，仅分享文本+链接，可使用简化版分享逻辑：
  // const handleShareTextOnly = async () => {
  //   await shareAsync('https://your-mall-url.com/products', {
  //     message: getShareText(),
  //   });
  // };

  return (
    <View style={styles.container}>
      {/* 商品列表容器，通过ref绑定用于截图 */}
      <View ref={productListRef} style={styles.productListContainer}>
        <Text style={styles.title}>我的精选商品</Text>
        <FlatList
          data={products}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <View style={styles.productItem}>
              <Text style={styles.productName}>{item.name}</Text>
              <Text style={styles.productPrice}>{item.price}</Text>
            </View>
          )}
        />
      </View>

      {/* 分享按钮 */}
      <Button title="分享到社交账号" onPress={handleShare} />
    </View>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  productListContainer: {
    marginBottom: 30,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  productItem: {
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  productName: {
    fontSize: 16,
    marginBottom: 5,
  },
  productPrice: {
    fontSize: 14,
    color: '#ff4444',
    fontWeight: '500',
  },
});

export default ProductShareComponent;

3. 关键注意事项 #

• 平台适配：iOS和Android的分享弹窗会自动列出设备上已安装的社交账号（如微信、QQ、微博等），无需额外配置；
• 权限处理：Expo已封装好基础权限，无需手动申请文件访问权限；若分享外部网络图片，需确保图片可正常访问；
• 测试建议：优先使用Expo Go进行快速测试，若需发布正式版本，构建原生包后验证分享功能是否正常；
• 自定义分享内容：若需分享单个商品的图片，可直接将商品图片的本地或网络URI传入shareAsync，替换截图URI即可。

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