Taroify

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

import { ShareSheet } from "@taroify/core"
// or
import ShareSheet from "@taroify/core/share-sheet"

代码演示

基础用法

分享面板通过 ShareSheet.Option 组件来定义分享选项。

import { ShareSheet } from "@taroify/core"

function BasicShareSheet() {
  const [open, setOpen] = useState(true)
  return (
    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ShareSheet.Header title="立即分享给好友" />
      <ShareSheet.Options>
        <ShareSheet.Option icon="wechat" name="微信" />
        <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
        <ShareSheet.Option icon="weibo" name="微博" />
        <ShareSheet.Option icon="qq" name="QQ" />
      </ShareSheet.Options>
      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
    </ShareSheet>
  )
}

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

import { ShareSheet } from "@taroify/core"

function MultilineShareSheet() {
  const [open, setOpen] = useState(true)
  return (
    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ShareSheet.Header title="立即分享给好友" />
      <ShareSheet.Options>
        <ShareSheet.Option icon="wechat" name="微信" />
        <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
        <ShareSheet.Option icon="weibo" name="微博" />
        <ShareSheet.Option icon="qq" name="QQ" />
      </ShareSheet.Options>
      <ShareSheet.Options>
        <ShareSheet.Option icon="link" name="复制链接" />
        <ShareSheet.Option icon="poster" name="分享海报" />
        <ShareSheet.Option icon="qrcode" name="二维码" />
        <ShareSheet.Option icon="weapp-qrcode" name="小程序码" />
      </ShareSheet.Options>
      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
    </ShareSheet>
  )
}

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入 Image 组件来使用自定义的图标。

import { Image, ShareSheet } from "@taroify/core"

function CustomShareSheet() {
  const [open, setOpen] = useState(true)
  return (
    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ShareSheet.Options>
        <ShareSheet.Option
          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-fire.png" />}
          name="名称"
        />
        <ShareSheet.Option
          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-light.png" />}
          name="名称"
        />
        <ShareSheet.Option
          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-water.png" />}
          name="名称"
        />
      </ShareSheet.Options>
      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
    </ShareSheet>
  )
}

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

import { ShareSheet } from "@taroify/core"

function ShareSheetWithDescription() {
  const [open, setOpen] = useState(true)
  return (
    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ShareSheet.Header title="立即分享给好友">描述信息</ShareSheet.Header>
      <ShareSheet.Options>
        <ShareSheet.Option icon="wechat" name="微信" />
        <ShareSheet.Option icon="weibo" name="微博" />
        <ShareSheet.Option icon="link" name="复制链接" description="描述信息" />
        <ShareSheet.Option icon="poster" name="分享海报" />
        <ShareSheet.Option icon="qrcode" name="二维码" />
      </ShareSheet.Options>
      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
    </ShareSheet>
  )
}

API

ShareSheet Props

参数	说明	类型	默认值
defaultOpen	默认是否显示动作面板	boolean	`false`
open	是否显示动作面板	boolean	`false`
className	样式类名	string	-
style	样式对象	CSSProperties	-
rounded	是否为圆角	string	-

ShareSheet.Backdrop Props

参数	说明	类型	默认值
className	样式类名	string	-
style	样式对象	CSSProperties	-
duration	动画时长，单位毫秒	number \| string	`300`
closeable	点击是否可以关闭	boolean	`true`

ShareSheet.Header Props

参数	说明	类型	默认值
className	样式类名	string	-
style	样式对象	CSSProperties	-
title	标题	string	-
children	描述信息	string	-

ShareSheet.Option Props

参数	说明	类型	默认值
className	分享选项类名	string	-
name	分享渠道名称	string	-
value	选项值	string	-
description	分享选项描述	string	-
icon	图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster` `weapp-qrcode` `wechat-moments`，支持传入 Image 组件	string	-
openType	微信开放能力，可选值为 `contact` `contactShare` `share` `getRealnameAuthInfo` `getAuthorize` `getPhoneNumber` `getUserInfo` `lifestyle` `launchApp` `openSetting` `feedback`	string	-

Events

事件名	说明	回调参数
onSelect	点击分享选项时触发	event: ShareSheet.OptionEvent
onCancel	点击取消按钮时触发	-
onClose	关闭面板时触发	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—share-sheet-description-font-size	var(—font-size-sm)	-
—share-sheet-options-padding	var(—padding-md) 0 var(—padding-md) var(—padding-xs)	-
—share-sheet-option-icon-margin	0 var(—padding-md)	-
—share-sheet-option-icon-size	48px $hd*	-
—share-sheet-option-icon-width	var(—share-sheet-option-icon-size)	-
—share-sheet-option-icon-height	var(—share-sheet-option-icon-size)	-
—share-sheet-option-icon-font-size	var(—share-sheet-option-icon-size)	-
—share-sheet-option-name-padding	0 var(—padding-base)	-
—share-sheet-option-name-margin-top	var(—padding-xs)	-
—share-sheet-option-name-color	var(—gray-7)	-
—share-sheet-option-name-font-size	var(—font-size-sm)	-
—share-sheet-option-name-line-height	1.4	-
—share-sheet-option-description-padding	0 var(—padding-base)	-
—share-sheet-option-description-color	var(—gray-5)	-
—share-sheet-option-description-font-size	var(—font-size-sm)	-

常见问题

如何实现分享逻辑？

在不同的 App 或浏览器中，存在各式各样的分享接口或分享方式，因此 ShareSheet 组件不提供具体的分享逻辑，需要开发者根据业务场景自行实现。

微信内分享

由于微信未提供分享相关的 API，需要引导用户点击右上角进行分享。

App 内分享

可以通过 JSBridge 调用原生应用的 SDK 进行分享。

分享海报或二维码

可以通过 Popup 组件以弹层的形式展示图片，然后引导用户保存图片进行分享。