FiveStarView.js
4.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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>
)
}
}