在React Native中实现鸿蒙跨平台开发分享功能，你可以使用`react-native-share`库，这个库支持多种分享方式，包括文本分享、图片分享，甚至是文件分享

React Native分享功能实现指南：使用react-native-share库可以轻松实现文本、图片和链接分享。首先通过npm或yarn安装库，新版本支持自动链接。文本分享使用Share.share()方法，图片分享需要提供URI路径并使用shareSingle()。在Harmony系统上需配合react-native-permissions处理存储权限。示例代码展示了完整的分享流程，包括权

2401_86031952

644人浏览 · 2025-12-16 18:37:33

2401_86031952 · 2025-12-16 18:37:33 发布

在React Native中实现分享功能，你可以使用react-native-share库，这个库支持多种分享方式，包括文本分享、图片分享，甚至是文件分享。下面是如何使用react-native-share来实现这些功能的步骤：

安装react-native-share

首先，你需要安装react-native-share库。在你的项目根目录下运行以下命令：

npm install react-native-share

或者如果你使用yarn：

yarn add react-native-share

链接库（如果需要）

对于某些版本的React Native，你可能需要手动链接库。从React Native 0.60开始，自动链接是默认启用的。如果不是，你可以使用以下命令进行链接：

react-native link react-native-share

使用react-native-share

在你的React Native组件中，你可以这样使用react-native-share来实现分享功能：

文本分享

import Share from 'react-native-share';

const shareText = async () => {
  try {
    Share.share({
      message: '这是一段要分享的文本',
    })
    .then(received => console.log('分享成功', received))
    .catch(err => console.log('分享失败', err));
  } catch (error) {
    console.error('分享出错:', error);
  }
};

图片分享

import Share from 'react-native-share';
import { Alert } from 'react-native'; // 可能需要这个来处理权限问题

const shareImage = async () => {
  try {
    // 确保你有图片的路径或者URI，这里以本地图片为例：'file:///path/to/your/image.jpg'
    const shareOptions = {
      title: '分享图片',
      message: '这是一张图片',
      url: 'file:///path/to/your/image.jpg', // 图片的本地路径或URL
      failOnCancel: false, // 如果用户取消分享，则返回失败（false为返回成功）
    };
    Share.shareSingle(shareOptions) // 使用shareSingle方法分享单条内容，适用于图片、文本等单条内容分享
      .then(response => console.log(response))
      .catch(err => console.log(err));
  } catch (error) {
    console.error('分享出错:', error);
  }
};

处理权限问题（Harmony）

在Harmony上，你可能需要处理运行时权限问题。你可以使用react-native-permissions库来请求必要的权限：

npm install react-native-permissions

或者使用yarn：

yarn add react-native-permissions

然后请求存储权限：

import Permissions from 'react-native-permissions'; // 导入权限库

const requestPermission = async () => {
  const hasPermission = await Permissions.check('storage'); // 检查存储权限
  if (hasPermission === 'denied') { // 如果权限被拒绝，请求权限
    const response = await Permissions.request('storage'); // 请求存储权限
    if (response === 'granted') { // 如果用户同意授权，则继续分享操作
      // 执行分享操作...
    } else { // 如果用户拒绝授权，则处理拒绝情况...
      Alert.alert('请允许应用访问存储权限以进行分享'); // 提示用户授权
    }
  } else if (hasPermission === 'granted') { // 如果已有权限，直接执行分享操作... }
};

确保在调用分享功能前检查并请求必要的权限。这样你的应用就能在用户设备上顺利地分享内容了。

真实实际代码演示：


// app.tsx
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView, Alert, Share } from 'react-native';

const App = () => {
  const [activeTab, setActiveTab] = useState<'text' | 'image' | 'link'>('text');
  const [content, setContent] = useState({
    text: '这是一段要分享的文本内容',
    image: 'https://picsum.photos/600/400',
    link: 'https://example.com'
  });

  // Base64 编码的图标
  const icons = {
    text: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIzIiB5PSI0IiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSI3IiB5MT0iOCIgeDI9IjE3IiB5Mj0iOCI+PC9saW5lPjxsaW5lIHgxPSI3IiB5MT0iMTIiIHgyPSIxNyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjciIHkxPSIxNiIgeDI9IjE3IiB5Mj0iMTYiPjwvbGluZT48L3N2Zz4=',
    image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTkgNWgyQTQgNCAwIDAgMSAyMSA5djEwYTQgNCAwIDAgMS00IDRoLTEwYTQgNCAwIDAgMS00LTR2LTJtLTYgMTBsMyAzIDUtNW0tOC00aDEwYTIgMiAwIDAgMSAyIDJ2MTJhMiAyIDAgMCAxLTIgMkg3YTIgMiAwIDAgMS0yLTJWN2EyIDIgMCAwIDEgMi0yeiI+PC9wYXRoPjwvc3ZnPg==',
    link: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNDE3IDQxN2EyIDIgMCAwIDEtMi0yVjI4N2EyIDIgMCAwIDEgMi0yaDEzOGEyIDIgMCAwIDEgMiAydjEzMGExIDIgMCAwIDEtMiAyeiI+PC9wYXRoPjxwYXRoIGQ9Ik0yODcgNDE3SDI4N2EyIDIgMCAwIDEtMi0yVjI4N2EyIDIgMCAwIDEgMi0yaDEzOGEyIDIgMCAwIDEgMiAydjEzMGExIDIgMCAwIDEtMiAyeiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMzcgMzY3TDI4NyA0MTciPjwvcGF0aD48cGF0aCBkPSJNMzY3IDI4N2wyLjUtMi41Ij48L3BhdGg+PC9zdmc+',
    wechat: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwN0MxNjAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTcuNSAxNEMxNi41IDE0IDE2IDEzLjUgMTYgMTMuNSAxNiAxMy41IDE3IDEzLjUgMTcgMTMuNSAxNyAxMy41IDE3LjUgMTQgMTcuNSAxNE0xMiAxMkE0IDQgMCAxIDAgOCA4YTQgNCAwIDAgMCA0IDR6TTggMjBoMTZhOCA4IDAgMCAwIDAtMTZINmE4IDggMCAwIDAgMiAxNnoiPjwvcGF0aD48L3N2Zz4=',
    qq: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxMkI3RjUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjkiIHI9IjMiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0xMiAxMmwtMiA4TTggMTJsNCA4TTIwIDEyaC00TTQgMTJoNCI+PC9wYXRoPjwvc3ZnPg==',
    weibo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNFNjE2MkQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjMiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0xMiAxNHY1TTggMTZoOE0xMiAyMnYtMiI+PC9wYXRoPjwvc3ZnPg==',
    copy: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI5IiB5PSI5IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxwYXRoIGQ9Ik01IDVIMXYxOGExIDIgMCAwIDAgMiAyaDE4YTIgMiAwIDAgMCAyLTJ2LTEiPjwvcGF0aD48L3N2Zz4='
  };

  const sharePlatforms = [
    { id: 'wechat', name: '微信', icon: icons.wechat },
    { id: 'qq', name: 'QQ', icon: icons.qq },
    { id: 'weibo', name: '微博', icon: icons.weibo },
    { id: 'copy', name: '复制', icon: icons.copy }
  ];

  const handleShare = async (platform: string) => {
    try {
      let message = '';
      let url = '';

      switch (activeTab) {
        case 'text':
          message = content.text;
          break;
        case 'image':
          message = '分享一张图片';
          url = content.image;
          break;
        case 'link':
          message = '分享一个链接';
          url = content.link;
          break;
      }

      await Share.share({
        message: `${message}${url ? `\n${url}` : ''}`,
        url: url || undefined
      });

      Alert.alert('分享成功', `已分享到${platform}`);
    } catch (error) {
      Alert.alert('分享失败', '无法完成分享操作');
    }
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>分享组件</Text>
        <Text style={styles.subtitle}>支持多种分享方式</Text>
      </View>

      {/* 分享类型切换 */}
      <View style={styles.tabContainer}>
        {(['text', 'image', 'link'] as const).map((tab) => (
          <TouchableOpacity
            key={tab}
            style={[
              styles.tab,
              activeTab === tab && styles.activeTab
            ]}
            onPress={() => setActiveTab(tab)}
          >
            <Image source={{ uri: icons[tab] }} style={styles.tabIcon} />
            <Text style={[
              styles.tabText,
              activeTab === tab && styles.activeTabText
            ]}>
              {tab === 'text' ? '文本' : tab === 'image' ? '图片' : '链接'}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* 内容预览区域 */}
      <View style={styles.previewContainer}>
        {activeTab === 'text' && (
          <View style={styles.textContent}>
            <Text style={styles.previewText}>{content.text}</Text>
          </View>
        )}

        {activeTab === 'image' && (
          <View style={styles.imageContent}>
            <Image 
              source={{ uri: content.image }} 
              style={styles.previewImage}
              resizeMode="cover"
            />
          </View>
        )}

        {activeTab === 'link' && (
          <View style={styles.linkContent}>
            <Text style={styles.previewLink}>{content.link}</Text>
          </View>
        )}
      </View>

      {/* 分享平台 */}
      <View style={styles.platformContainer}>
        <Text style={styles.sectionTitle}>分享到</Text>
        <View style={styles.platformGrid}>
          {sharePlatforms.map((platform) => (
            <TouchableOpacity
              key={platform.id}
              style={styles.platformItem}
              onPress={() => handleShare(platform.name)}
            >
              <View style={styles.platformIconContainer}>
                <Image source={{ uri: platform.icon }} style={styles.platformIcon} />
              </View>
              <Text style={styles.platformText}>{platform.name}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      {/* 直接分享按钮 */}
      <TouchableOpacity 
        style={styles.shareButton}
        onPress={() => handleShare('系统')}
      >
        <Text style={styles.shareButtonText}>直接分享</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f7fa',
    padding: 20
  },
  header: {
    alignItems: 'center',
    marginBottom: 30
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333'
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 5
  },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 6,
    marginBottom: 20,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
    borderRadius: 8,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  activeTab: {
    backgroundColor: '#4285F4'
  },
  tabIcon: {
    width: 20,
    height: 20,
    marginRight: 8
  },
  tabText: {
    fontSize: 16,
    color: '#666'
  },
  activeTabText: {
    color: '#fff'
  },
  previewContainer: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    minHeight: 150,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textContent: {
    alignItems: 'center'
  },
  previewText: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center'
  },
  imageContent: {
    width: '100%',
    height: 200,
    borderRadius: 8,
    overflow: 'hidden'
  },
  previewImage: {
    width: '100%',
    height: '100%'
  },
  linkContent: {
    alignItems: 'center'
  },
  previewLink: {
    fontSize: 16,
    color: '#4285F4',
    textDecorationLine: 'underline'
  },
  platformContainer: {
    marginBottom: 20
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15
  },
  platformGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between'
  },
  platformItem: {
    width: '48%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 15,
    alignItems: 'center',
    marginBottom: 15,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4
  },
  platformIconContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#f0f4f8',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10
  },
  platformIcon: {
    width: 24,
    height: 24
  },
  platformText: {
    fontSize: 14,
    color: '#333'
  },
  shareButton: {
    backgroundColor: '#4285F4',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    marginBottom: 20
  },
  shareButtonText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: 'bold'
  }
});

export default App;

这段React Native代码实现了一个跨平台的分享功能组件，其核心原理基于React Native的Share API。从鸿蒙系统适配角度来看，这个组件具有良好的跨平台特性，能够在包括HarmonyOS在内的多种操作系统上运行。

代码采用了Tab切换的设计模式，通过useState钩子管理当前激活的分享类型状态（文本、图片或链接）。组件内部维护了一个内容对象，存储不同类型分享所需的数据。这种设计使得组件具备清晰的数据管理机制和良好的扩展性。

在分享功能实现方面，代码利用了React Native内置的Share.share()方法，这是关键的跨平台API。该方法会自动调用设备原生的分享面板，适配不同操作系统的UI规范。对于鸿蒙系统而言，这一API会被映射到HarmonyOS的分布式分享能力，实现与系统原生分享体验的一致性。

请添加图片描述

分享渠道的图标使用了Base64编码的SVG矢量图形，这种方式确保了图标在不同分辨率屏幕上的清晰度，同时减少了网络请求。从鸿蒙开发角度分析，这种资源处理方式符合HarmonyOS对高质量UI组件的要求。

在错误处理机制上，代码通过try-catch结构捕获分享过程中可能出现的异常，并提供用户友好的反馈提示。这种设计体现了良好的用户体验考量，在鸿蒙应用开发中同样强调这种容错处理的重要性。

整体而言，该组件通过React Native的跨平台能力，屏蔽了底层操作系统的差异性，使得同一套代码能够在包括鸿蒙系统在内的多个平台上提供一致的功能体验。在鸿蒙生态中，这种开发方式能够有效利用React Native for HarmonyOS的能力，实现快速的应用开发和部署。

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

在这里插入图片描述

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

在这里插入图片描述

最后运行效果图如下显示：

请添加图片描述

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

分类管理模块 - Cordova与OpenHarmony混合开发实战

人工智能6S服务平台

鸿蒙学习实战之路-图文混排全攻略

人工智能6S服务平台

视觉盛宴：鸿蒙Canvas/Animation与Flutter CustomPaint的深度协同

如果鸿蒙原生的侧滑菜单和Flutter页面的弹窗动画不同步，用户体验会大打折扣。：从鸿蒙原生列表页，点击一个商品卡片，平滑过渡到Flutter详情页，且商品图片要跟随动画放大。你的应用中是否遇到过因为混合栈导致的“掉帧”现象？在鸿蒙与Flutter的混合开发中，图形与动画的协同是**“及格”与“优秀”**的分水岭。掌握这些图形底层的协同技巧，你就能打造出视觉体验浑然一体的鸿蒙+Flutter应用。