RectColorPicker

RectColorPicker 矩形颜色选择器

简介

1.0 开始加入

矩形颜色选择器

何时使用

颜色选择器,可用于选择Hue值、Saturation值以及Kelvin值,即色相、饱和度以及色温

代码演示

水平Hue值选择器

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

export default class RectColorPickerHorizontalScene extends Component {
state = {
hsb: [180, 100, 100],
}

_handleValueChange = data => {
this.setState({ hsb: data.hsb });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<RectColorPicker
style={{ width: 300, height: 50 }}
hsb={this.state.hsb}
onValueChange={this._handleValueChange}
/>
</View>
);
}
}

垂直Hue值选择器

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

export default class RectColorPickerHSPickerScene extends Component {
state = {
hsb: [180, 100, 100],
}

_handleValueChange = data => {
this.setState({ hsb: data.hsb });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<RectColorPicker
style={{ width: 100, height: 300 }}
hsb={this.state.hsb}
direction="vertical"
axis="y"
onValueChange={this._handleValueChange}
/>
</View>
);
}
}

HS选择器

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

export default class RectColorPickerVerticalScene extends Component {
state = {
hsb: [180, 100, 100],
}

_handleValueChange = data => {
this.setState({ hsb: data.hsb });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<RectColorPicker
style={{ width: 300, height: 200 }}
hsb={this.state.hsb}
saturation="2b"
direction="all"
axis="x"
onValueChange={this._handleValueChange}
/>
</View>
);
}
}

Kelvin值选择器

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

export default class RectColorPickerVerticalScene extends Component {
state = {
hsb: [180, 100, 100],
}

_handleValueChange = data => {
this.setState({ hsb: data.hsb });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<RectColorPicker
style={{ width: 300, height: 50 }}
hsb={this.state.hsb}
kelvin={true}
onValueChange={this._handleValueChange}
/>
</View>
);
}
}

API

style

容器样式

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

hueStyle

色相容器样式

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

thumbStyle

滑块样式

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

minK

最小K值(仅用于色温选择时,即kelvin为true的时候)

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

maxK

最大K值(仅用于色温选择时,即kelvin为true的时候)

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

disabled

是否禁用滑块

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

kelvin

是否开启色温选择模式

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

withFollowColor

滑块的背景色是否需要跟着底色

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

axis

色相的方向,一般需要与direction配合使用

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

direction

滑块的可滑动方向,一般需要与axis配合使用

类型(Type) 必传(Required) 默认值
enum: 'horizontal', 'vertical', 'all' horizontal

saturation

饱和度方向,默认为none,即饱和度默认为100%,需要与direction配合使用

类型(Type) 必传(Required) 默认值
enum: 'none', '2l', '2r', '2b', '2t' none

hsb

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

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

position

滑块坐标点位置,具体格式为{ x: number, y: number },position的定位优先级比hsb高

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

onStart

滑动开始回调

类型(Type) 必传(Required) 默认值
({ hex, hsb, k, percentX, percentY, rgb, x, y }) => void null

onValueChange

滑动值变更回调

类型(Type) 必传(Required) 默认值
({ hex, hsb, k, percentX, percentY, rgb, x, y }) => void null

onComplete

滑动结束回调

类型(Type) 必传(Required) 默认值
({ hex, hsb, k, percentX, percentY, rgb, x, y }) => void null

renderThumb

自定义渲染滑块组件

类型(Type) 必传(Required) 默认值
({ ref, style }) => void null

children

子元素

类型(Type) 必传(Required) 默认值
any null
400-881-8611