编程马·菜鸟教程

Appearance

分享功能 ​

1. 分享功能简介 ​

分享功能是移动应用中常见的功能，它允许用户将应用中的内容分享给其他应用或联系人。分享功能可以增强用户体验，提高应用的传播率和用户参与度。

在 React Native 中，实现分享功能主要有两种方式：

  1. 使用 React Native 内置的 Share API
  2. 使用第三方库实现更丰富的分享功能

2. 使用内置 Share API ​

2.1 基本使用 ​

React Native 内置的 Share API 提供了基本的分享功能，支持分享文本、URL 和图片。

javascript
import React from 'react';
import { View, Button, Share, Platform } from 'react-native';

const App = () => {
  // 分享文本
  const shareText = async () => {
    try {
      const result = await Share.share({
        message: '这是一条分享的文本内容',
        title: '分享标题',
      });
      
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          console.log('分享到特定应用:', result.activityType);
        } else {
          console.log('分享成功');
        }
      } else if (result.action === Share.dismissedAction) {
        console.log('分享被取消');
      }
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  // 分享链接
  const shareUrl = async () => {
    try {
      await Share.share({
        message: '查看这个精彩内容: https://example.com',
        url: 'https://example.com',
        title: '分享链接',
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="分享文本" onPress={shareText} />
      <Button title="分享链接" onPress={shareUrl} />
    </View>
  );
};

export default App;

2.2 分享图片 ​

分享图片需要先获取图片的 URI：

javascript
import React from 'react';
import { View, Button, Share, Image, Platform } from 'react-native';

const App = () => {
  // 分享本地图片
  const shareImage = async () => {
    try {
      // 本地图片路径
      const imageUri = Platform.OS === 'ios' 
        ? 'file:///path/to/image.jpg' 
        : 'file:///storage/emulated/0/Pictures/image.jpg';
      
      await Share.share({
        message: '分享一张图片',
        url: imageUri,
        title: '分享图片',
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="分享图片" onPress={shareImage} />
    </View>
  );
};

export default App;

3. 使用第三方库 ​

对于更复杂的分享需求，可以使用第三方库，如 react-native-share。

3.1 安装 ​

bash
npm install react-native-share
# 或
npx expo install react-native-share

3.2 基本使用 ​

javascript
import React from 'react';
import { View, Button, Platform } from 'react-native';
import Share from 'react-native-share';

const App = () => {
  // 分享文本
  const shareText = async () => {
    try {
      const result = await Share.open({
        message: '这是一条分享的文本内容',
        title: '分享标题',
      });
      console.log('分享结果:', result);
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  // 分享链接
  const shareUrl = async () => {
    try {
      await Share.open({
        message: '查看这个精彩内容',
        url: 'https://example.com',
        title: '分享链接',
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  // 分享图片
  const shareImage = async () => {
    try {
      const imageUri = Platform.OS === 'ios' 
        ? 'file:///path/to/image.jpg' 
        : 'file:///storage/emulated/0/Pictures/image.jpg';
      
      await Share.open({
        title: '分享图片',
        url: imageUri,
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="分享文本" onPress={shareText} />
      <Button title="分享链接" onPress={shareUrl} />
      <Button title="分享图片" onPress={shareImage} />
    </View>
  );
};

export default App;

3.3 分享到特定应用 ​

javascript
import React from 'react';
import { View, Button } from 'react-native';
import Share from 'react-native-share';

const App = () => {
  // 分享到微信
  const shareToWechat = async () => {
    try {
      const isInstalled = await Share.isPackageInstalled('com.tencent.mm');
      
      if (isInstalled) {
        await Share.shareSingle({
          message: '分享到微信',
          url: 'https://example.com',
          title: '分享标题',
          social: Share.Social.WHATSAPP,
          whatsAppNumber: '8612345678901', // 可选
        });
      } else {
        console.log('微信未安装');
      }
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  // 分享到Facebook
  const shareToFacebook = async () => {
    try {
      await Share.shareSingle({
        message: '分享到Facebook',
        url: 'https://example.com',
        title: '分享标题',
        social: Share.Social.FACEBOOK,
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="分享到微信" onPress={shareToWechat} />
      <Button title="分享到Facebook" onPress={shareToFacebook} />
    </View>
  );
};

export default App;

4. 高级配置 ​

4.1 自定义分享内容 ​

javascript
import React from 'react';
import { View, Button } from 'react-native';
import Share from 'react-native-share';

const App = () => {
  const shareCustomContent = async () => {
    try {
      const shareOptions = {
        title: '分享标题',
        message: '分享消息',
        url: 'https://example.com',
        subject: '分享主题', // 用于电子邮件
        dialogTitle: '选择分享方式',
        failOnCancel: false,
      };

      const result = await Share.open(shareOptions);
      console.log('分享结果:', result);
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="自定义分享" onPress={shareCustomContent} />
    </View>
  );
};

export default App;

4.2 分享多图片 ​

javascript
import React from 'react';
import { View, Button, Platform } from 'react-native';
import Share from 'react-native-share';

const App = () => {
  const shareMultipleImages = async () => {
    try {
      const images = [
        Platform.OS === 'ios' 
          ? 'file:///path/to/image1.jpg' 
          : 'file:///storage/emulated/0/Pictures/image1.jpg',
        Platform.OS === 'ios' 
          ? 'file:///path/to/image2.jpg' 
          : 'file:///storage/emulated/0/Pictures/image2.jpg',
      ];

      await Share.open({
        title: '分享多张图片',
        urls: images,
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="分享多张图片" onPress={shareMultipleImages} />
    </View>
  );
};

export default App;

5. 实际应用场景 ​

5.1 分享文章 ​

javascript
const shareArticle = async (article) => {
  try {
    await Share.share({
      message: `${article.title} - ${article.content.substring(0, 100)}...`,
      url: article.url,
      title: article.title,
    });
  } catch (error) {
    console.error('分享失败:', error);
  }
};

5.2 分享用户成就 ​

javascript
const shareAchievement = async (user, achievement) => {
  try {
    await Share.share({
      message: `${user.name} 达成了 ${achievement} 成就！快来一起加入吧！`,
      url: 'https://example.com/app',
      title: '成就分享',
    });
  } catch (error) {
    console.error('分享失败:', error);
  }
};

5.3 分享商品 ​

javascript
const shareProduct = async (product) => {
  try {
    await Share.share({
      message: `查看这个商品：${product.name} - ¥${product.price}`,
      url: product.url,
      title: product.name,
    });
  } catch (error) {
    console.error('分享失败:', error);
  }
};

6. 最佳实践 ​

  1. 用户体验：

    • 提供明确的分享按钮
    • 分享内容要简洁明了
    • 预填充有价值的分享文本

  2. 平台差异：

    • 注意 iOS 和 Android 平台的分享行为差异
    • 针对不同平台优化分享内容

  3. 错误处理：

    • 处理分享失败的情况
    • 检查应用是否安装（分享到特定应用时）

  4. 性能考虑：

    • 分享图片时注意图片大小
    • 避免在分享过程中阻塞主线程

  5. 内容合规：

    • 确保分享内容符合平台政策
    • 避免分享敏感信息

7. 常见问题与解决方案 ​

7.1 分享失败 ​

问题：调用分享 API 后，分享失败或没有反应

解决方案：

  • 检查分享内容是否符合平台要求
  • 检查图片 URI 是否正确
  • 检查应用是否有分享权限
  • 处理分享 API 的异常

7.2 分享到特定应用失败 ​

问题：无法分享到指定的应用

解决方案：

  • 检查目标应用是否已安装
  • 检查应用包名是否正确
  • 检查分享内容是否符合目标应用的要求

7.3 分享图片不显示 ​

问题：分享的图片在目标应用中不显示

解决方案：

  • 确保图片 URI 是正确的本地路径
  • 检查图片是否可访问
  • 注意图片大小限制

7.4 平台差异 ​

问题：在 iOS 和 Android 上分享行为不一致

解决方案：

  • 针对不同平台使用不同的分享配置
  • 测试在两个平台上的分享效果
  • 使用第三方库来处理平台差异

8. 扩展阅读 ​

9. 完整示例 ​

javascript
// App.js
import React, { useState } from 'react';
import { View, Text, Button, TextInput, StyleSheet, Image } from 'react-native';
import Share from 'react-native-share';

const App = () => {
  const [shareText, setShareText] = useState('这是一条分享内容');
  const [shareUrl, setShareUrl] = useState('https://example.com');
  const [shareTitle, setShareTitle] = useState('分享标题');

  // 分享文本和链接
  const handleShare = async () => {
    try {
      const result = await Share.open({
        message: shareText,
        url: shareUrl,
        title: shareTitle,
      });
      console.log('分享结果:', result);
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  // 分享到社交媒体
  const shareToSocialMedia = async (social) => {
    try {
      await Share.shareSingle({
        message: shareText,
        url: shareUrl,
        title: shareTitle,
        social: social,
      });
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>分享功能示例</Text>
      
      <TextInput
        style={styles.input}
        placeholder="分享文本"
        value={shareText}
        onChangeText={setShareText}
      />
      
      <TextInput
        style={styles.input}
        placeholder="分享链接"
        value={shareUrl}
        onChangeText={setShareUrl}
      />
      
      <TextInput
        style={styles.input}
        placeholder="分享标题"
        value={shareTitle}
        onChangeText={setShareTitle}
      />
      
      <Button title="分享到任意应用" onPress={handleShare} />
      
      <View style={styles.socialButtons}>
        <Button title="分享到微信" onPress={() => shareToSocialMedia(Share.Social.WHATSAPP)} />
        <Button title="分享到Facebook" onPress={() => shareToSocialMedia(Share.Social.FACEBOOK)} />
        <Button title="分享到Twitter" onPress={() => shareToSocialMedia(Share.Social.TWITTER)} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginBottom: 10,
    borderRadius: 5,
    backgroundColor: '#fff',
  },
  socialButtons: {
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
});

export default App;

这个示例展示了如何使用 react-native-share 库实现分享功能，包括分享文本、链接到任意应用或特定的社交媒体平台。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建