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

Tuya Design

Button 按钮

代码演示

纯文本按钮

纯 Icon 按钮

带 Icon 文字的按钮

图标按钮（带背景渐变）

API