React-Native Share不支持Web端，如何实现浏览器兼容？

DevOps 小满

2026-8-11

核心解决思路

React Native官方Share组件仅适配原生端，Web端需基于浏览器能力单独实现。我们可以通过浏览器原生Web Share API做兼容，同时为不支持该API的浏览器提供降级方案。

改造后的兼容代码

const onShare = async () => {
  try {
    const shareContent = `WSLRemit transfer receipt\n\nTransfer number: ${Transaction?.manual_payment_ref} \nThey get: ${Transaction?.recipient_gets} ${Transaction?.target_currency}\nYou sent: ${Transaction?.nominal}  ${Transaction?.source_currency}\nTotal paid:  ${Transaction?.total}  ${Transaction?.source_currency}`;

    // 检测Web环境及浏览器分享支持情况
    if (typeof window !== 'undefined' && window.navigator.share) {
      // 使用浏览器原生分享能力
      await window.navigator.share({
        text: shareContent
      });
      console.log('分享完成');
    } else {
      // 降级处理：复制内容到剪贴板
      await navigator.clipboard.writeText(shareContent);
      alert('分享内容已复制到剪贴板，请手动转发');
    }
  } catch (error) {
    console.error('分享失败:', error);
    alert('分享出错，请重试');
  }
};

关键细节说明

API兼容性检测：通过window.navigator.share判断浏览器是否支持原生分享，该API覆盖Chrome、Edge、Safari等主流现代浏览器
降级逻辑：对不支持Web Share API的老旧浏览器，直接将分享文本复制到剪贴板，保证基础功能可用
状态反馈：保留控制台日志和用户提示，对齐原生Share组件的反馈逻辑