React Native 电商五星好评封装

最新推荐文章于 2024-05-16 10:09:26 发布

weixin_40166364

最新推荐文章于 2024-05-16 10:09:26 发布

阅读量960

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-native 五星好评

本文链接：https://blog.csdn.net/weixin_40166364/article/details/78350584

react-native 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个基于React Native的星级评价组件实现方法，该组件允许用户通过触摸选择不同的星级评分，并提供了高度定制化的选项，如星星的数量、大小、间距等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component, PropTypes } from 'react'
import {
    View,
    StyleSheet,
    TouchableOpacity,
    Image,
} from 'react-native';

export default class StarRating extends Component {
    static defaultProps = {
        maxStars: 5,
        rating: 1,
        starSize: -1,
        interItemSpacing: 0,
        valueChanged: (index) => { },
        editAble: true,
    };
    static propTypes = {
        maxStars: PropTypes.number,
        rating: PropTypes.number,
        unSelectStar: PropTypes.number.isRequired,
        selectStar: PropTypes.number.isRequired,
        valueChanged: PropTypes.func,
        starSize: PropTypes.number,
        interItemSpacing: PropTypes.number,
        editAble: PropTypes.bool,
    };

    constructor(props) {
        super(props);
        this.state = {
            maxStars: this.props.maxStars,
            rating: this.props.rating,
            firstImageLayout: null,
            starSize: this.props.starSize,
        };
    }

    render() {
        let starArray = [];
        let imageSource = null;
        for (let i = 1; i <= this.state.maxStars; i++) {
            if (i <= this.props.rating) {
                imageSource = this.props.selectStar;
            }
            else {
                imageSource = this.props.unSelectStar;
            }

            let styleArray = [];
            if (i !== this.state.maxStars) {
                styleArray.push({ marginRight: this.props.interItemSpacing });
            }
            if (this.state.starSize > 0) {
                styleArray.push({ width: this.state.starSize, height: this.state.starSize });
            }

            //push Image
            starArray.push(
                <TouchableOpacity
                    key={i}
                    onPress={() => {
                        if (this.props.editAble) {
                            this.props.valueChanged(i)
                        }
                    }}
                >
                    <Image
                        source={imageSource}
                        style={styleArray}
                    />
                </TouchableOpacity>
            );
        }
        return (
            <View
                style={styles.container}
            >
                {starArray}
            </View>
        )
    }

};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

使用组件

<StarRating
     maxStars={5} // 最大星星数量
     rating={this.state.sellerScore} // 当前星星数
     starSize={20} // 星星大小
     interItemSpacing={8} // 星星之间的间距
     valueChanged={(star) => {this.setState({sellerScore: star},() => {Console.log(this.state.sellerScore)})}} // 星星数量改变
     selectStar={SELECTED_ICON} // 选中图片
     unSelectStar={UNSELECTED_ICON} // 未选中图片
 />

这里写图片描述