生物节律色盘

更新时间：2022-01-04 03:40:21LLM 副本以 Markdown 格式查看下载 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;

上一篇普通定时

下一篇Modal 动画组件