/
CommentListCell.js
87 lines (77 loc) · 2.03 KB
/
CommentListCell.js
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
'use strict';
const React = require('react-native');
const {
StyleSheet,
Image,
View,
TouchableHighlight,
ActivityIndicatorIOS,
ListView,
Text,
Component
} = React;
export const CommentListCell = ({data}) => {
const rowData = data;
const username = rowData && rowData.login ? rowData.login : '匿名';
let iconUrl;
if (rowData.uid && rowData.avatar_file_name !== 'nopic.jpg' &&rowData.avatar_file_name !== 'avatar_file_name') {
iconUrl = 'http://pic.qiushibaike.com/system/avtnew/' + (rowData.uid + '').substring(0, 4) + '/' + rowData.uid + '/thumb/' + rowData.avatar_file_name;
} else {
iconUrl = 'http://static.qiushibaike.com/images/thumb/missing.png'
}
const userIcon = <Image style={styles.thumbnail}
source={{ uri: iconUrl }}
/>
return <View style={styles.cellWrapperOuter}>
<View style={styles.cellWrapper}>
{userIcon}
<View>
<Text style={styles.username}>{username}</Text>
<Text style={styles.content}>{rowData.content}</Text>
</View>
</View>
</View>
}
const styles = StyleSheet.create({
cellWrapperOuter: {
backgroundColor: '#f5f5f5'
},
cellWrapper: {
borderTopColor: '#ededed',
borderTopWidth: 1,
marginLeft: 8,
marginRight: 8,
marginTop: 4,
marginBottom: 4,
padding: 12,
flex: 1,
flexDirection: 'row',
// backgroundColor: '#222121'
},
cellContent: {
paddingTop: 12,
paddingLeft: 12,
paddingRight: 12,
backgroundColor: '#f5f5f5',
},
titleWrapper: {
flex: 1,
flexDirection: 'row',
},
thumbnail: {
width: 40,
height: 40,
borderRadius: 20,
},
username: {
fontSize: 16,
color: '#3d3d42',
marginLeft: 10
},
content: {
marginTop: 6,
marginLeft: 10,
color: '#63625e',
fontSize: 14
},
});