Last Updated on : 2021-12-30 06:00:38download
Field name | Data type | Description | Default value |
---|---|---|---|
size | Number | The style of the picker. | 280 |
ringWidth | Number | The size of the outer circle for the thumb. | 40 |
thumbSize | Number | The size of the inner circle for the thumb. | 36 |
pickerStyle | Style | The style of the outermost layer for the picker. | None |
timeStyle | Style | The style of the time picker. | {backgroundColor: ‘transparent’ } |
thumbStyle | Style | The style of the thumb icon. | {backgroundColor: ‘#222430’ } |
iconStyle | Style | The style of the icon. | None |
timeImg | Image | The image of the time pointer. | None |
data | Array | The data. | [] |
disabled | Boolean | Specifies whether the thumb icon can be dragged. | false |
disabledOpacity | Boolean | The opacity of the thumb in the disabled state. | 1 |
stepOverEnabled | Boolean | Specifies whether to slide through the previous and next nodes. | false |
stepTime | Number | The angle of the 15-minimum time step. | 45 |
lastRingColor | String | Adds one color following the sunset node to optimize the color picker. | ‘#000’ |
onMove | Func | The event in which the thumb icon starts moving. | None |
onRelease | Func | The event in which the thumb icon stops moving. | None |
onChange | Func | The event in which the thumb icon is changed. | None |
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;
Is this page helpful?
YesFeedbackIs this page helpful?
YesFeedback