react-native-grading
react-native-grading is a RN component for users to grade scores. Four modes are supplied by the component, arcs
/simles
/stars
/board
.
Before Using: Link ART in Xcode
Using this component directly in your project may encounter the following error:
No component found for view with name "ARTSurfaceView"
First find ART.xcdoeproj
from your-project/node_modules/react-native/Libraies/ART/ART.xcdoeproj
and drag it into Xcode your-project/Libraries
.
Then turn to the project's General Settings and add libART.a
into the Linked Frameworks and Libraries
list.
Finally, press cmd + B to rebuild project.
Usage
install from npm
npm install --save react-native-grading
import in project (Insure libART.a is linked)
;
board mode (Default)
stars mode
arcs mode
smiles mode
Properties
Property | Default | Type | Description |
---|---|---|---|
mode | ‘board' | string | Grading mode, oneOf[‘board’, ‘arcs’, ’stars’, ’smiles'] |
enable | true | bool | whether the grading component is interactive |
readOnly | false | bool | whether the component is read only |
score | 0 | number | current score. In board mode, it’s current average score; In arcs mode, score can be a percentage when isPercentage is set true (eg. 45 stands for 45%); for smiles mode, it’s meaningless. |
scoreBase | 5 | number | In arcs mode, it’s set 100 automatically when isPercentage=true ; In board mode, scoreBase is always 5. |
onGrading | - | function | Callback function of grading component, the first argument is the score graded by user. In smile mode, the argument is bool type. |
num | 0 | number | The times of grading, board mode only. |
name | '' | string | The title of arc, arcs mode only. |
isPercentage | false | bool | Whether component displays percentage, arcs mode only. |
activeColor | ACTIVE_COLOR | string | The main color used in the component, ACTIVE_COLOR is defined in Constants file. |
defaultColor | DEFAULT_COLOR | string | The default color used in the component, DEFAULT_COLOR is defined in Constants file. |
fontColor | FONT_COLOR | string | The font color used in the component. FONT_COLOR is defined in Constants file. |
cancelText | ‘Cancel' | string | The text of grading modal’s cancel button. Enable in arcs or board mode both. |
confirmText | ‘Confirm' | string | The text of grading modal’s confirm button. Enable in arcs or board mode both. |
cancelTextStyle | {} | object | Custom style for cancel button text of modal. Enable in arcs or board mode both. |
confirmTextStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. |
cancelButtonStyle | {} | object | Custom style for cancel button of modal. Enable in arcs or board mode both. |
confirmButtonStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. |
Methods
Please use refs to invoke the following instance methods.
Method | Params | Description |
---|---|---|
openGradingModal | - | Manually open the grading modal. Enabled in arcs mode and board mode both |