方向盘组件

CircleHandle

预览效果

组件属性

使用示例

import React, { FC } from 'react';
import { PressKey, CircleHandle } from 'tuya-panel-remote-sdk'
import { Utils } from 'tuya-panel-kit';

const { convertX: cx } = Utils.RatioUtils;
const img = require('./res/add.png');
const loadingImg = require('./res/loading.png');

// 默认样式(不可点击效果)
<CircleHandle />
// 默认样式
<CircleHandle
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
/>
// 自定义样式
<CircleHandle
  padding={cx(10)}
  outBgColor="rgba(246,206,95,0.3)"
  radius={cx(90)}
  centerRadius={cx(30)}
  offset={cx(20)}
  pointColor="#FFF"
  pointRadius={cx(4)}
  centerTextStyle={{ fontSize: cx(16), color: 'white' }}
  bgColor={{
    top: 'rgba(206,89,75,1)',
    right: 'rgba(246,206,95,1)',
    bottom: 'rgba(85,158,101,1)',
    left: 'rgba(87,140,238,1)',
    center: 'rgba(194,117,241,1)',
  }}
  activeBgColor={{
    top: 'rgba(206,89,75,0.5)',
    right: 'rgba(246,206,95,0.5)',
    bottom: 'rgba(85,158,101,0.5)',
    left: 'rgba(87,140,238,0.5)',
    center: 'rgba(194,117,241,0.7)',
  }}
  disabledColor={{
    center: 'red',
  }}
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
/>
<CircleHandle
  padding={0}
  centerTextStyle={{ fontSize: cx(16), color: 'white' }}
  outBgColor="rgba(246,206,95,0.3)"
  radius={cx(90)}
  centerRadius={cx(30)}
  offset={cx(20)}
  pointColor="#FFF"
  pointRadius={cx(4)}
  bgColor={{
    top: 'rgba(206,89,75,1)',
    right: 'rgba(246,206,95,1)',
    bottom: 'rgba(85,158,101,1)',
    left: 'rgba(87,140,238,1)',
    center: 'rgba(194,117,241,1)',
  }}
  activeBgColor={{
    top: 'rgba(206,89,75,0.5)',
    right: 'rgba(246,206,95,0.5)',
    bottom: 'rgba(85,158,101,0.5)',
    left: 'rgba(87,140,238,0.5)',
    center: 'rgba(194,117,241,0.7)',
  }}
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
/>
// 自定义样式(不可点击效果)
<CircleHandle
  padding={cx(10)}
  outBgColor="rgba(246,206,95,0.3)"
  radius={cx(90)}
  centerRadius={cx(30)}
  offset={cx(20)}
  pointColor="#FFF"
  pointRadius={cx(4)}
  centerTextStyle={{ fontSize: cx(20), color: '#FFF' }}
  status={{
    top: false,
    bottom: false,
    left: false,
    right: false,
    center: false,
  }}
  centerStatus={false}
  disabledBgColor={{
    top: 'rgba(206,89,75,0.5)',
    right: 'rgba(246,206,95,0.5)',
    bottom: 'rgba(85,158,101,0.5)',
    left: 'rgba(87,140,238,0.5)',
    center: 'rgba(194,117,241,0.7)',
  }}
  tipStyle={[styles.centerText, { fontSize: cx(15) }]}
  />
<CircleHandle
  centerTextStyle={{ fontSize: cx(16), color: 'red' }}
  keyContent={{
    top: <TYText style={{ color: 'rgba(206,89,75,1)' }}>top</TYText>,
    right: <IconFont d={icon.minus} size={cx(18)} />,
    bottom: <TYText style={{ color: 'rgba(85,158,101,1)' }}>bottom</TYText>,
    left: <Image source={img} style={{ tintColor: '#CCC' }} />,
  }}
  tip={{
    top: 'top',
    right: 'right',
    bottom: 'bottom',
    left: 'left',
  }}
  tipStyle={{ color: 'rgba(194,117,241,1)' }}
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
/>
// Loading
<PressKey
  width={cx(100)}
  height={cx(50)}
  onPress={() =>
    this.setState({
      loading: !this.state.loading,
      isFirst: loading ? !isFirst : isFirst,
    })
  }
  text={loading ? "结束" : "开始"}
  status={true}
  />
<CircleHandle
  loading={{ top: loading && isFirst, center: loading && !isFirst }}
  keyContent={{
    top: <TYText style={{ color: 'rgba(206,89,75,1)' }}>top</TYText>,
    right: <IconFont d={icon.minus} size={cx(18)} />,
    bottom: <TYText style={{ color: 'rgba(85,158,101,1)' }}>bottom</TYText>,
    left: <Image source={img} style={{ tintColor: '#CCC' }} />,
  }}
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
  />
<CircleHandle
  loading={{ top: loading && isFirst, center: loading && !isFirst }}
  loadingContent={<Image source={loadingImg} />}
  status={{
    top: true,
    bottom: true,
    left: true,
    right: true,
    center: true,
  }}
/>