CircularPicker

CircularPicker 圆形选择器

简介

1.0 开始加入

圆形滑动选择器

何时使用

一般用于某些需要进度选择的场景以及可以用于选择Hue值,即色相选择器

代码演示

圆形滑动选择器

import React, { Component } from 'react';
import { View } from 'react-native';
import { CircularPicker } from 'tuya-panel-kit';

export default class CircularPickerBasicScene extends Component {
state = {
degree: 0,
}

_handleValueChange = data => {
this.setState({ degree: Math.round(data.degree) });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<CircularPicker
degree={this.state.degree}
radius={115}
strokeWidth={40}
startDegree={0}
endDegree={360}
onValueChange={this._handleValueChange}
onComplete={this._handleValueChange}
/>
</View>
);
}
}

圆形缺角进度选择器

import React, { Component } from 'react';
import { View } from 'react-native';
import { CircularPicker } from 'tuya-panel-kit';

export default class CircularPickerProgressScene extends Component {
state = {
degree: 30,
}

_handleValueChange = data => {
this.setState({ degree: Math.round(data.degree) });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<CircularPicker
degree={this.state.degree}
radius={115}
strokeWidth={40}
startDegree={30}
endDegree={330}
strokeColor="red"
frontStrokeColor="blue"
onValueChange={this._handleValueChange}
onComplete={this._handleValueChange}
/>
</View>
);
}
}

HuePicker

import React, { Component } from 'react';
import {
View,
Image,
} from 'react-native';
import { CircularPicker } from 'tuya-panel-kit';

const Res = {
hue: require('../../res/hue.png'),
};

export default class CircularPickerHuePickerScene extends Component {
state = {
degree: 0,
}

_handleValueChange = data => {
this.setState({ degree: Math.round(data.degree) });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<CircularPicker
degree={this.state.degree}
startDegree={0}
endDegree={360}
TrackComponent={<Image source={Res.hue} />}
onValueChange={this._handleValueChange}
onComplete={this._handleValueChange}
/>
</View>
);
}
}

交互演示

API

style

容器样式

类型(Type) 必传(Required)
ViewProptypes.style

thumbStyle

滑块样式

类型(Type) 必传(Required)
ViewProptypes.style

degree

角度值,用于定位滑块位置,起始点0位于六点钟方向,范围必须为0-360

类型(Type) 必传(Required) 默认值
number 0

startDegree

起始绘制角度

类型(Type) 必传(Required) 默认值
number 30

endDegree

结束绘制角度

类型(Type) 必传(Required) 默认值
number 330

radius

圆形半径

类型(Type) 必传(Required) 默认值
number 115

frontStrokeColor

前置描边颜色,可作为显示进度的颜色

类型(Type) 必传(Required) 默认值
Color null

strokeColor

底部描边颜色

类型(Type) 必传(Required) 默认值
Color red

strokeWidth

描边宽度

类型(Type) 必传(Required) 默认值
number 40

strokeLinecap

描边交接点形状

类型(Type) 必传(Required) 默认值
enum: 'butt','round', 'square' ‘round’

disabled

是否禁用滑块,禁用后滑块会隐藏

类型(Type) 必传(Required) 默认值
boolean false

TrackComponent

轨道组件,若传递则该传递的轨道组件会被给予计算好的宽度及高度

类型(Type) 必传(Required) 默认值
element null

renderThumb

自定义渲染滑块组件

类型(Type) 必传(Required) 默认值
({ disabled, x, y, size }) => void null

onStart

滑动开始回调

类型(Type) 必传(Required) 默认值
() => void null

onValueChange

滑动值变更回调

类型(Type) 必传(Required) 默认值
({ hue, degree, percent }) => void null

onComplete

滑动结束回调

类型(Type) 必传(Required) 默认值
({ hue, degree, percent }) => void null

stops

底部描边渐变梯度停靠点,若传递该值strokeColor会被忽略

类型(Type) 必传(Required) 默认值
array 具体格式与类似[{offset: ‘0%’,stopColor: ‘#ff0’,stopOpacity: ‘1’},{offset:‘100%’,stopColor:’#00f’,stopOpacity:‘1’}]
400-881-8611