ColorPicker

ColorPicker 颜色选择器

简介

1.0 开始加入

颜色选择器(色盘)

何时使用

颜色选择器,可用于选择HSV值,即色相饱和度和亮度

代码演示

HSV选择器

ColorPicker最常见的用法就是用来选择HSV

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

export default class ColorPickerBasicScene extends Component {
state = {
hsb: [360, 100, 100],
}

_handleComplete = hsb => {
this.setState({ hsb });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ColorPicker
hsb={this.state.hsb}
onComplete={this._handleComplete}
/>
</View>
);
}
}

交互演示

API

style

容器样式

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

width

选择器宽度(高度需和宽度保持一致)

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

height

选择器高度

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

hsb

hsb值(hsv)即色相、饱和度、亮度

类型(Type) 必传(Required) 默认值
array [180,100,100]

disabled

是否禁用滑块

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

mode

选择器模式,有彩光和白光两种选项,其中白光模式的作用是隐藏滑块并更改内圆样式

类型(Type) 必传(Required) 默认值
enum: 'colour', 'white' ‘colour’

ColorPickerImage

自定义色盘图片

类型(Type) 必传(Required) 默认值
number or object number(内置色盘图片)

innerRadius

内圆半径,内圆半径内滑块将无法拖动入内

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

hasInner

是否显示内圆

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

innerElement

自定义内圆组件

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

onPress

内圆点击事件

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

onStart

滑动开始回调

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

onValueChange

滑动值变更回调

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

onComplete

滑动结束回调

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

电话咨询

在线咨询

400-881-8611