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

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