Thumbs.js
2.47 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
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Dimensions,
} = ReactNative;
let {width, height} = Dimensions.get('window');
let thumbHeight = Math.ceil((214 / (750 - 34)) * (width - 34));
let marginLeft = Math.ceil(width - 34 - thumbHeight * 3) / 2;
export default class Thumbs extends React.Component {
static propTypes = {
data: React.PropTypes.arrayOf(
React.PropTypes.shape({
url: React.PropTypes.string,
})
),
};
constructor(props) {
super (props);
}
_renderThumbsNumber() {
if (this.props.data.length >= 3) {
return (
<View style={styles.numContainer} >
<View style={[styles.square, styles.square1]}/>
<View style={[styles.square, styles.square2]}/>
<Text style={styles.number}>
{this.props.data.length}
</Text>
</View>
);
} else {
return null;
}
}
render() {
return (
<View style={[styles.container, this.props.style]}>
{this.props.data.slice(0, 3).map((item, i) => {
let margin = i > 0 ? marginLeft: 0;
return <Image key={i} style={[styles.thumb, {marginLeft: margin}]} source={{uri: item.url}}/>
})}
{this._renderThumbsNumber()}
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
},
thumb: {
width: thumbHeight,
height: thumbHeight,
},
numContainer: {
backgroundColor: 'black',
opacity: 0.5,
position: 'absolute',
width: 32,
height: 17,
right: 5,
bottom: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
square: {
borderWidth: 0.5,
borderColor: 'white',
width: 10,
height: 8,
},
square1: {
top: -0.5,
},
square2: {
position: 'absolute',
top: 5.5,
left: 6,
},
number: {
color: 'white',
fontFamily: 'Helvetica Light',
fontSize: 12,
marginLeft: 6,
backgroundColor: 'transparent',
},
});