FiveStarView.js 4.07 KB
import React, {Component} from 'react';
import {Text, View,} from 'react-native';
// 第三方评分组件
import StarRating from "react-native-star-rating";
// 默认标题高度
const titleViewHeight = (24);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);
/*
评分组件(type:'SCORE')
 */
export default class FiveStarView extends Component {
    // 构造方法
    constructor(props) {
        super(props);
        // 分数
        this.state = {
            rating: 0,
        };
        // 传入参数
        this.attrData = this.props.attrData;
        // json解析后的传入参数
        this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};// allowHalf 固定:true|false
        // 星级比例
        this.starRating = 1;
    }

    // 生命周期-组件将要展示
    componentWillMount() {
        // 最多星星数
        this.maxValue = this.extendData.maxValue ? parseInt(this.extendData.maxValue) : 5;
        // 计算比例
        this.starRating = 5 / this.maxValue;
        // 每颗星代表的数值
        this.starValue = this.maxValue / 5;

        // 默认选择的星数
        let defaultValue = this.extendData.default ? parseInt(this.extendData.default) : 5;
        this.setState({
            rating: defaultValue * this.starRating
        });
        this.attrData.value = defaultValue;
    }

    render() {
        /*
        name:标题
        code:代码编号
        type:控件类型(SCORE)
        description:描述
        isRequired:是否必须
        isPreview:是否预览
        */
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        // 是否允许半星
        let {allowHalf} = this.extendData;

        return (
            // 最外层样式区域
            <View style={{backgroundColor: "#fff", paddingTop: VPading, paddingLeft: 10, paddingRight: 15}}>
                {/* 标题显示区域*/}
                <View style={{
                    flexDirection: 'row',
                    height: titleViewHeight,
                    justifyContent: 'flex-start',
                    alignItems: 'center'
                }}>
                    {/*是否必须UI设定*/}
                    {isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
                    {!isRequired && <Text style={{color: "#fff"}}>* </Text>}
                    {/*标题设定*/}
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ""}</Text>
                </View>
                {/*第三方评分组件*/}
                <StarRating
                    disabled={false}
                    activeOpacity={0.8}
                    //注意这里始终是5,10颗星其实是在五颗星的基础上允许了半星
                    maxStars={5}
                    //星星大小
                    starSize={20}
                    //星星样式
                    starStyle={{marginRight: 15}}
                    //组件内部容器的样式
                    containerStyle={{width: '60%', backgroundColor: 'white', marginLeft: 10, marginVertical: 10}}
                    //选中星星后的回调
                    selectedStar={rating => {
                        this.setState({
                            rating: rating
                        });
                        // TODO 为了与pc端保持一致,取半分时,不计算整数值
                        //this.attrData.value = rating * this.starValue;
                        this.attrData.value = rating;
                    }}
                    //用于显示选中的星星数量
                    rating={this.state.rating}
                    //星星未选中时的颜色
                    emptyStarColor="#cbcbcb" // 默认 gray
                    //星星选中时的颜色
                    fullStarColor="#ffc300"
                    //半星选中时的颜色
                    halfStarColor="#ffc300"
                    halfStarEnabled={this.maxValue === 10}
                />
            </View>
        )
    }
}