生物节律色盘

更新时间:2022-01-04 03:40:29下载pdf

RhythmsCircle

示图展示

生物节律色盘

组件属性

字段名 类型 描述 默认值
size Number picker大小 280
ringWidth Number 滑块外圈大小 40
thumbSize Number 滑块内圈大小 36
pickerStyle Style 色盘最外围样式
timeStyle Style 时间盘样式 {backgroundColor: ‘transparent’ }
thumbStyle Style 滑块图标样式 {backgroundColor: ‘#222430’ }
iconStyle Style 图标样式
timeImg Image 时间指针图片
data Array 数据 []
disabled Boolean 滑块图标是否可拖动 false
disabledOpacity Boolean 不能拖动的透明度 1
stepOverEnabled Boolean 是否可以滑过超过上一个节点和下一个节点 false
stepTime Number 最小间隔时间为15分钟对应的角度 45
lastRingColor String 在日落节点后多加一个颜色进行优化 ‘#000’
onMove Func 滑块图标移动事件
onRelease Func 滑块图标移动结束事件
onChange Func 滑块图标改变事件

使用示例

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RhythmsCircle } from '@tuya/tuya-panel-lamp-sdk';
import { Utils } from 'tuya-panel-kit';
import Icon from '../../../res/rhythmIcons';

const defaultData = [
  {
    color: '#CE8040',
    noActiveColor: '#fff',
    activeColor: '#F7EB2A',
    icon: Icon.icon1,
    index: 0,
    time: 390,
    valid: true,
  },
  {
    color: '#CEECFE',
    noActiveColor: '#fff',
    activeColor: '#FFB420',
    icon: Icon.icon2,
    index: 1,
    time: 690,
    valid: true,
  },
];
const RhythmsCircleScene: React.FC = () => {
  const [data, setData] = useState(defaultData);

  return (
    <View>
        <RhythmsCircle
          size={200}
          ringWidth={30}
          thumbSize={26}
          onRelease={d => setData(d)}
          disabled={false}
          disabledOpacity={1}
          stepOverEnabled={false}
          data={data}
        />
    </View>
  );
};
export default RhythmsCircleScene;