Question

我尝试了sharethis-reactjs https://libraries.io/npm/sharethis-reactjs 并也分享https://www.npmjs.com/package/react-share。

我所能做的就是发送url或一些文本，我想发送带有一些文本的图片（只有图片也可以）。

Internet上的答案仅是react-native，我正在React.js中寻找解决方案。我正在创建PWA，因此它将在移动设备中正常工作。

<InlineShareButtons
      config={{
        alignment: 'center',  // alignment of buttons (left, center, right)
        color: 'social',      // set the color of buttons (social, white)
        enabled: true,        // show/hide buttons (true, false)
        font_size: 16,        // font size for the buttons
        labels: 'cta',        // button labels (cta, counts, null)
        language: 'en',       // which language to use (see LANGUAGES)
        networks: [           // which networks to include (see SHARING NETWORKS)
          'whatsapp',
          'linkedin',
          'messenger',
          'facebook',
          'twitter'
        ],
        padding: 12,          // padding within buttons (INTEGER)
        radius: 4,            // the corner radius on each button (INTEGER)
        show_total: true,
        size: 40,             // the size of each button (INTEGER)

        // OPTIONAL PARAMETERS
        url: '', // (defaults to current url)
        image: '',  // (defaults to og:image or twitter:image)
        description: 'custom text',       // (defaults to og:description or twitter:description)
        title: 'custom title',            // (defaults to og:title or twitter:title)
        message: 'custom email text',     // (only for email sharing)
        subject: 'custom email subject',  // (only for email sharing)
        username: 'custom twitter handle' // (only for twitter sharing)
      }}
    />

有人可以告诉我我可以在image =“”中输入什么来共享图像或以其他方式在react js中共享图像吗？

Answer 1

您可以在React.js Web应用程序中使用Web Share API共享文本，URL和文件。使用Web Share API，Web应用程序能够以与本机应用程序相同的方式将文本，URL和文件共享到设备上安装的其他应用程序。

Web Share API有一些限制：

只能在支持HTTPS的网站上使用。
必须响应诸如单击之类的用户操作来调用它。通过onload处理程序调用它是不可能的。
截至2020年中，仅适用于Safari和Android 铬叉。

https://web.dev/web-share/

以下代码可用于共享文本和URL以及图像：

const handleOnSubmit= async()=> {
  const response = await fetch(image);
  // here image is url/location of image
  const blob = await response.blob();
  const file = new File([blob], 'share.jpg', {type: blob.type});
  console.log(file);
  if(navigator.share) {
    await navigator.share({
      title: "title",
      text: "your text",
      url: "url to share",
      files: [file]     
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error in sharing', error));
  }else {
    console.log(`system does not support sharing files.`);
  }
}

useEffect(()=> {
  if (navigator.share === undefined) {
    if (window.location.protocol === 'http:') {
      window.location.replace(window.location.href.replace(/^http:/, 'https:'));
    } 
  }
}, []);

如何在reactjs中的Whatsapp上与文本共享图像？

1 个答案: