1.0.1 • Published 6 years ago
@rn-components-kit/rating v1.0.1
Rating
English | 中文
Ratings are used to collect measurable feedback from users. It supports the following features:
- touchand- moveoperation
- customized active/inactive icon (type,color,size)
- different step values (e.g. 0.1/0.2/0.5/1)
How to use
npm install @rn-components-kit/rating --save| Preview | Code | 
|---|---|
| Demo1 Code | |
| Demo2 Code | |
| Demo3 Code | 
Props
- style
- step
- total
- value
- iconGap
- iconSize
- disabled
- activeIconType
- activeIconColor
- inActiveIconType
- inActiveIconColor
- onValueChange
Reference
Props
style
Allows you to customize style
| Type | Required | Default | 
|---|---|---|
| object | no | - | 
step
The granularity that Rating can step through values
| Type | Required | Default | 
|---|---|---|
| enum( 0.1,0.2,0.5,1) | no | 1 | 
total
Count of star
| Type | Required | Default | 
|---|---|---|
| number | no | 5 | 
value
Current count of active star
| Type | Required | Default | 
|---|---|---|
| number | no | 0 | 
iconGap
Space between stars
| Type | Required | Default | 
|---|---|---|
| number | no | 4 | 
iconSize
Size of star icon
| Type | Required | Default | 
|---|---|---|
| number | no | 20 | 
disabled
Determines whether value can be changed
| Type | Required | Default | 
|---|---|---|
| boolean | no | false | 
activeIconType
Icon type when it is active
| Type | Required | Default | 
|---|---|---|
| enum value | no | 'star-fill' | 
activeIconColor
Icon color when it is active
| Type | Required | Default | 
|---|---|---|
| string | no | '#FADB14' | 
inActiveIconType
Icon type when it is inactive
| Type | Required | Default | 
|---|---|---|
| enum value | no | 'star-fill' | 
inActiveIconColor
Icon color when it is inactive
| Type | Required | Default | 
|---|---|---|
| string | no | '#E8E8E8' | 
onValueChange
(value: number) => voidA callback will be triggered when Rating's value changes
| Type | Required | Default | 
|---|---|---|
| function | no | () => {} |