HeaderList.js
2.36 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
'use strict';
import React from 'react';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../common/components/YH_Image';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
TouchableOpacity,
Platform,
} from 'react-native';
export default class HeaderList extends React.Component {
constructor(props) {
super(props);
}
render() {
let { resource ,lackNum} = this.props;
if(!resource) return null;
for (var i = 0; i < lackNum; i++) {
resource.push({
headUrl: '',
})
}
return (
<View style={styles.container}>
{resource.map((item, i) => {
if (i == 0) {
return (
<View key={i} style={styles.icon1}>
<YH_Image style={{width: 40*DEVICE_WIDTH_RATIO,height: 40*DEVICE_WIDTH_RATIO}} url={item.headUrl} circle={true}></YH_Image>
<Image source={require('../images/PT_tx_tz.png')} style={styles.ovewicon} />
</View>
);
}else {
if (!item.headUrl) {
return (
<Image key={i} source={require('../images/PT_head.png')} style={styles.icon} />
);
}else {
return (
<YH_Image key={i} style={styles.icon} url={item.headUrl} circle={true}></YH_Image>
);
}
}
})}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
container: {
flex: 1,
width: width - 30*DEVICE_WIDTH_RATIO,
height: 40*DEVICE_WIDTH_RATIO,
justifyContent: 'center',
flexDirection: 'row',
},
ovewicon: {
width: 40*DEVICE_WIDTH_RATIO,
height: 40*DEVICE_WIDTH_RATIO,
position: 'absolute',
top: 0,
left: 0,
},
icon1: {
width: 40*DEVICE_WIDTH_RATIO,
height: 40*DEVICE_WIDTH_RATIO,
borderRadius: 20*DEVICE_WIDTH_RATIO,
overflow: 'hidden',
},
icon: {
width: 40*DEVICE_WIDTH_RATIO,
height: 40*DEVICE_WIDTH_RATIO,
borderRadius: 20*DEVICE_WIDTH_RATIO,
overflow: 'hidden',
marginLeft: 20*DEVICE_WIDTH_RATIO,
}
});