如何在react-share中在社交媒体上分享多个图像

Question

import React, { useEffect } from 'react'
import {
  FacebookIcon, FacebookShareButton, WhatsappIcon,
  WhatsappShareButton,
} from 'react-share'
import { withTheme } from '../../Theme/ThemeProvider'
import CustomModal from '../../UI/CustomModal'
import CustomText from '../../UI/CustomText'

function ShareModal(props) {
  const { toggleModal, visible, data } = props
  useEffect(() => {
    console.log(data, 'data on lap')
  }, [data])
  return (
    <CustomModal
      visible={visible}
      onDismiss={() => toggleModal('showShareModal')}
    >
      <CustomText size="medium" weight="bold">Share to</CustomText>
      <FacebookShareButton
        quote={data.message}
        url={data.mediaDire ? data.mediaDire[0].media : ''}
      >
        <FacebookIcon round />
      </FacebookShareButton>
      <WhatsappShareButton
        quote={data.message}
        url={data.mediaDire ? data.mediaDire[0].media : ''}
      >
        <WhatsappIcon round />
      </WhatsappShareButton>
    </CustomModal>
  )
}

const stylesheet = {
}

export default withTheme(stylesheet)(ShareModal)

我正在使用 react-share 包将图像从我的应用程序共享到社交媒体。我在 data.media 中有一组图像，如何共享多个图像。另外我无法添加标题。只有我可以添加主题标签

Answer 1

由于react-share包的限制，不提供在单个共享操作中共享多个图像的直接支持。但是，我们可以通过为每个社交媒体平台自定义分享操作来实现此功能。

import React, { useEffect } from 'react'
import {
  FacebookIcon, FacebookShareButton, WhatsappIcon,
  WhatsappShareButton,
} from 'react-share'
import { withTheme } from '../../Theme/ThemeProvider'
import CustomModal from '../../UI/CustomModal'
import CustomText from '../../UI/CustomText'

function ShareModal(props) {
  const { toggleModal, visible, data } = props

  useEffect(() => {
    console.log(data, 'data on lap')
  }, [data])

  const shareToFacebook = () => {
    if (data.mediaDire && data.mediaDire.length > 0) {
      const mediaUrls = data.mediaDire.map(media => media.media);
      const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(data.message)}`;
      window.open(shareUrl, '_blank');
    }
  };

  const shareToWhatsapp = () => {
    if (data.mediaDire && data.mediaDire.length > 0) {
      const mediaUrls = data.mediaDire.map(media => media.media);
      const message = encodeURIComponent(`${data.message}\n${mediaUrls.join('\n')}`);
      const shareUrl = `https://api.whatsapp.com/send?text=${message}`;
      window.open(shareUrl, '_blank');
    }
  };

  return (
    <CustomModal
      visible={visible}
      onDismiss={() => toggleModal('showShareModal')}
    >
      <CustomText size="medium" weight="bold">Share to</CustomText>
      <div>
        <FacebookIcon round onClick={shareToFacebook} />
        <WhatsappIcon round onClick={shareToWhatsapp} />
      </div>
    </CustomModal>
  )
}

const stylesheet = {
}

export default withTheme(stylesheet)(ShareModal)

说明：

1. 我们定义了单独的函数 shareToFacebook 和 shareToWhatsapp 来分别处理 Facebook 和 WhatsApp 的共享操作。
2. 在每个函数内，我们手动构建共享 URL，包括消息和多个图像 URL（如果可用）。
3. 然后我们使用 window.open() 在新窗口中打开这些 URL。