react-native-star-rating-view
StarRatingView for react-native, supporting decimal fraction and sliding rating. Inspired by HCSStarRatingView
Demo
see the Demo
Install
Note: need react-native-vector-icons
If you do not want to import react-native-vector-icons
,
try the purejs branch
npm install react-native-star-rating-view --save
Usage
... // readOnly, allow accurate value(只读、显示小数)<StarRatingBar score=23 dontShowScore=false // true: not show the score text view allowsHalfStars=true accurateHalfStars=true/>// sliding rating, not allow accurate value(滑动打分、不允许小数)<StarRatingBar readOnly=false continuous=true score=37 onStarValueChanged= { console; }/>// sliding rating, allow accurate value(滑动打分、精确到小数)<StarRatingBar starStyle= width: 20 height: 20 readOnly=false continuous=true score=37 allowsHalfStars=true accurateHalfStars=true onStarValueChanged= { console; }/>
customize star image(自定义图片)
// readOnly(默认只读、不显示小数)<StarRatingBar score=23 //emptyStarColor='#ff6666' //tintColor='#ff6666' emptyStarImage=<Image style=width:16 height: 16 source=uri: 'emptyStar.png: your image path' /> filledStarImage=<Image style=width:16 height: 16 source= /> scoreTextStyle=color:'#ff6666'/> // customize star size(自定义尺寸大小)<View style=height: 60 flexDirection: 'row' alignItems: 'center'> <StarRatingBar score=23 //emptyStarColor='#ff6666' //tintColor='#ff6666' starStyle= width: 26 height: 26 emptyStarImage=<Image style=width: 26 height: 26 source=uri: 'emptyStar.png: your image path' /> filledStarImage=<Image style=width: 26 height: 26 source= /> scoreTextStyle=color:'#ff6666' /></View>
License
MIT