SliderView.js
4.41 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
111
112
113
114
115
116
117
118
119
120
121
122
import React, {Component} from 'react';
import {Slider, Text, View} from 'react-native';
// 默认高度
const defaultHeight = (70);
// 默认标题高度
const titleViewHeight = (24);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);
/*
滑块组件(type:'SLIDE')
*/
export default class SliderView extends Component {
// 构造方法
constructor(props) {
super(props);
this.state = {
// 滑块值
sliderValue: 0,
};
// 传入参数
this.attrData = this.props.attrData;
// 用于带出滑块停止滑动后取值的callback回调
this.onComplete = this.props.onComplete;
// json解析后的传入参数
this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
}
// 生命周期-组件将要展示
componentWillMount() {
let defaultValue = this.extendData.default;
this.setState({
sliderValue: 0
})
}
render() {
/*
name:标题
code:代码编号
type:控件类型(SLIDE)
description:描述
isRequired:是否必须
isPreview:是否预览
*/
let {name, code, type, description, isRequired, isPreview} = this.attrData;
/*
step:步进(单次最小滑动距离)
minValue:最小值
maxValue:最大值
showSpaceDot:是否显示指示点（组件不支持）
rangeSlide:是否是范围显示滑块，可以两头显示范围（组件不支持）
*/
let {step, minValue, maxValue, showSpaceDot, rangeSlide} = this.extendData;
return (
// 最外层样式区域
<View style={{
// 宽度
width: '100%',
// 背景色
backgroundColor: 'white',
// 高度
height: defaultHeight,
// 上内边距
paddingTop: VPading,
// 横向内边距
paddingHorizontal: HPading
}}>
{/*标题显示区域*/}
<View style={{
height: titleViewHeight,
flexDirection: 'row',
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)', marginBottom: 5}}>{name || ""}</Text>
{/*滑块值显示设定*/}
<Text style={{
flex: 1,
fontSize: 16,
color: 'rgba(0, 0, 0 , 1)',
marginHorizontal: 10,
textAlign: 'right'
}}>
{Number.isInteger(this.state.sliderValue) ? this.state.sliderValue + "" : parseFloat(this.state.sliderValue).toFixed(2)}</Text>
</View>
{/*滑块组件*/}
<Slider
style={{width: '100%', marginTop: 5}}
{/*滑块滑动值*/}
value={this.state.sliderValue}
{/*滑块最小滑动值*/}
minimumValue={minValue || 0}
{/*滑块最大滑动值*/}
maximumValue={maxValue || 100}
{/*滑块步进*/}
step={Number(step)}
{/*FIXME：是否显示指示点（组件不支持）*/}
showSpaceDot={showSpaceDot}
{/*FIXME：是否是范围显示滑块，可以两头显示范围（组件不支持）*/}
rangeSlide={rangeSlide}
{/*滑块滑动时取值变化的回调*/}
onValueChange={(value) => {
this.setState({
sliderValue: value
})
}}
{/*滑块停止滑动后的回调*/}
onSlidingComplete={value => this.attrData.value = value}
//thumbImage={}
/>
</View>
);
}
}