StarRatingView for react-nativ

StarRatingView for react-native, supporting decimal fraction and sliding rating. Inspired by HCSStarRatingView

see the Demo

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

import StarRatingBar from 'react-native-star-rating-view/StarRatingBar' ... // readOnly, allow accurate value(只读、显示小数) <StarRatingBar score={2.3} 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={3.7} onStarValueChanged={(score) => { console.log('new score:' + score); }} /> // sliding rating, allow accurate value(滑动打分、精确到小数) <StarRatingBar starStyle={{ width: 20, height: 20, }} readOnly={false} continuous={true} score={3.7} allowsHalfStars={true} accurateHalfStars={true} onStarValueChanged={(score) => { console.log('new score:' + score); }} /> customize star image(自定义图片)

// readOnly(默认只读、不显示小数) <StarRatingBar score={2.3} //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={require('star.png: your image path')} />} scoreTextStyle={{color:'#ff6666'}} /> // customize star size(自定义尺寸大小) <View style={{height: 60, flexDirection: 'row', alignItems: 'center'}}> <StarRatingBar score={2.3} //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={require('star.png: your image path')} />} scoreTextStyle={{marginLeft: 10, color:'#ff6666'}} /> </View> or use Icon from 'react-native-vector-icons/FontAwesome'(使用Icon)

import Icon from 'react-native-vector-icons/FontAwesome' <StarRatingBar score={2.3} starStyle={{ width: 20, height: 20, }} readOnly={false} continuous={true} allowsHalfStars={true} accurateHalfStars={true} emptyStarImage={<Icon name="heart-o" size={20} color="#999"/>} filledStarImage={<Icon name="heart" size={20} color="red"/>} scoreTextStyle={{marginLeft: 10, color:'red'}} /> License

MIT