如何在React/React Native或Adalo中实现图文分享至Instagram、Facebook

无额外依赖的简易实现方案 #

无需安装任何第三方库，直接用原生能力即可完成需求，适配Adalo的运行限制：

• 深度链接唤起APP分享
  Facebook、Instagram均公开了标准的深度跳转规则，在React Native自定义组件中直接调用Linking接口即可唤起：
  1. 先对分享内容的特殊字符做URL编码处理：const encodedCaption = encodeURIComponent('你的帖子描述')、const encodedImgUrl = encodeURIComponent('你的图片公网链接')
  2. Instagram Feed分享链接构造：instagram://library?AssetPath=图片本地URI&caption=${encodedCaption}
  3. Facebook Feed分享链接构造：fb://share/?href=${encodedImgUrl}&quote=${encodedCaption}
  4. 跳转前先调用Linking.canOpenURL(目标链接)校验设备是否安装对应APP，校验通过后调用Linking.openURL(目标链接)完成跳转。
     注意：iOS端需要在Adalo应用配置的Info.plist中，将instagram、fb添加到LSApplicationQueriesSchemes白名单中，否则无法正常识别跳转链接
• Web Share API + 网页端分享兜底
  如果不需要定向唤起指定APP，可直接调用浏览器原生的Web Share API，系统会自动弹出包含Instagram、Facebook选项的分享面板，适配移动端和网页端的Adalo运行环境，代码示例：

  const handleShare = async () => {
    const shareData = {
      title: "帖子标题",
      text: "帖子描述内容",
      url: "帖子图片的公网可访问链接"
    }
    try {
      // 支持原生分享的设备直接调用系统面板
      await navigator.share(shareData)
    } catch (e) {
      // 不支持原生分享的设备跳转到对应平台的网页分享页
      const igWebUrl = `https://www.instagram.com/share/create/?text=${encodeURIComponent(shareData.text)}&url=${encodeURIComponent(shareData.url)}`
      window.open(igWebUrl, '_blank')
    }
  }
  

兼容Adalo的第三方库推荐 #

如果需要更完善的分享能力，可选择无原生依赖的轻量分享库@pietile-native-kit/share，该库不需要执行原生链接操作，完全适配Adalo自定义组件的运行限制，支持直接传入本地图片URI、描述文本，一键定向分享到Instagram、Facebook平台，不用手动构造跳转参数。

通用注意事项 #

• 所有用于分享的图片必须提前上传到公网可访问的存储服务，Adalo内部的临时资源路径无法被第三方平台识别
• 所有跳转参数中的中文、特殊字符必须经过encodeURIComponent编码，避免参数丢失或跳转失败
• 如果需要分享到Instagram Stories，可自行拼接对应深度链接参数，规则和Feed分享逻辑一致

内容的提问来源于stack exchange，提问作者Davidaa_WoW