Button 按钮

Button 是一个最常用的组件，用于一些纯文本、图片、Icon 等需要点击的场合。

代码演示

纯文本按钮

import { Button } from 'tuya-panel-kit'

<Button text="点我一下" />

纯 Icon 按钮

import { Button, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

const powerPath = `M874.039 149.961c199.948 199.949 199.948 524.13 0 724.078-199.949 199.948-524.13 199.948-724.078 0-199.948-199.949-199.948-524.13 0-724.078 19.995-19.995 52.413-19.995 72.408 0 19.995 19.995 19.995 52.413 0 72.408-159.959 159.959-159.959 419.303 0 579.262 159.959 159.959 419.303 159.959 579.262 0 159.959-159.959 159.959-419.303 0-579.262-19.995-19.995-19.995-52.413 0-72.408 19.995-19.995 52.413-19.995 72.408 0zM562.2 0a1 1 0 0 1 1 1v510a1 1 0 0 1-1 1H461.8a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h100.4z`;

<Button
  iconColor="#fff"
  size={24}
  style={{
    width: cx(48),
    height: cx(48),
    backgroundColor: '#1C1D1E',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    shadowRadius: 8,
    elevation: 8,
  }}
  wrapperStyle={{
    alignSelf: 'flex-start',
  }}
  iconPath={powerPath}
/>

带 Icon 文字的按钮

import { Button, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

const powerPath = `M874.039 149.961c199.948 199.949 199.948 524.13 0 724.078-199.949 199.948-524.13 199.948-724.078 0-199.948-199.949-199.948-524.13 0-724.078 19.995-19.995 52.413-19.995 72.408 0 19.995 19.995 19.995 52.413 0 72.408-159.959 159.959-159.959 419.303 0 579.262 159.959 159.959 419.303 159.959 579.262 0 159.959-159.959 159.959-419.303 0-579.262-19.995-19.995-19.995-52.413 0-72.408 19.995-19.995 52.413-19.995 72.408 0zM562.2 0a1 1 0 0 1 1 1v510a1 1 0 0 1-1 1H461.8a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h100.4z`;

<Button
  iconColor="#fff"
  size={24}
  style={{
    width: cx(48),
    height: cx(48),
    backgroundColor: '#1C1D1E',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    shadowRadius: 8,
    elevation: 8,
  }}
  iconPath={powerPath}
  text={'开关'}
/>
<Button
  iconColor="#fff"
  textDirection="right"
  size={24}
  iconPath={powerPath}
  style={{
    width: cx(48),
    height: cx(48),
    backgroundColor: '#1C1D1E',
  }}
  textStyle={{
    color: '#fff',
    marginLeft: 0,
    marginRight: cx(15),
  }}
  wrapperStyle={{
    backgroundColor: '#1C1D1E',
    borderRadius: cx(12),
    marginLeft: cx(27),
    position: 'relative',
    top: cx(-12),
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    shadowRadius: 8,
    elevation: 8,
  }}
  text={'开关'}
/>

图标按钮（带背景渐变）

import { Button } from 'tuya-panel-kit'

<Button
  textDirection="right"
  size={40}
  icon="selected"
  iconSize={24}
  iconColor="#fff"
  text="文字"
  background={{
    x1: '20%',
    y1: '20%',
    x2: '30%',
    y2: '100%',
    stops: {
      '0%': '#ffff00',
      '100%': '#000',
    },
  }}
/>

API

继承自 TouchableOpacityProps

属性名	描述	类型	默认值
stretch	按钮是否跟随父容器拉伸	boolean	`false`
disabled	按钮是否禁用	boolean	`false`
size	按钮背景尺寸，默认为 noSet。large: 48, normal: 40, small: 32。	'large' \| 'normal' \| 'small' \| 'noSet' \| number	`'noSet'`
type	按钮背景类型。normal：背景色为transparent；若为primary：则跟随主色	'primary' \| 'normal'	`'normal'`
background	按钮背景，可为颜色值或渐变值	string \| LinearGradientBackground \| RadialGradientBackground	`null`
text	按钮内的文字内容	string	`''`
textSingleLine	按钮内的文字是否只显示一行，即超出显示省略号	boolean	`true`
textDirection	按钮内的文字排列方向，默认放置文字位于按钮底部	'left' \| 'top' \| 'right' \| 'bottom' \| 'center'	`'bottom'`
icon	按钮内的图标名称	string	`undefined`
iconPath	按钮内的图标路径	string	`null`
iconSize	按钮内的图标尺寸	number	`null`
iconColor	按钮内的图标颜色	string	`null`
image	按钮内的图片资源路径	string	`null`
imageColor	按钮内的图片颜色	string	`null`
imageStyle	按钮内的图片样式	StyleProp	`null`
badgeText	徽标字体内容，即按钮右上角徽标	string	`''`
disabledOpacity	按钮内容的禁用透明度比例	number	`0.2`
style	按钮的样式	StyleProp	`{}`
wrapperStyle	最外层容器的样式	StyleProp	`{}`
border	按钮背景的边框值，安卓有瑕疵，暂时不用	string \| boolean \| number	`true`
textStyle	按钮内字体样式	StyleProp	`{}`
badgeStyle	按钮内徽标容器的样式	StyleProp	`{}`
badgeTextStyle	按钮内徽标字体的样式	StyleProp	`{}`
useART	--	boolean	`false`
textAccessibilityLabel	测试标识	string	`'Button_Text'`
badgeAccessibilityLabel	测试标识	string	`'Button_Badge'`
badgeTextAccessibilityLabel	测试标识	string	`'Button_Badge_Text'`
theme	主题配置	{ fontSize?: number; fontColor?: string; iconSize?: number; bgWidth?: number; bgHeight?: number; bgColor?: string; margin?: number[]; iconColor?: string; bgRadius?: number;}	`{}`

Tuya Design

Button 按钮

代码演示

纯文本按钮

纯 Icon 按钮

带 Icon 文字的按钮

图标按钮（带背景渐变）

API