MsgNotification.js
2.44 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
import React, { Component } from "react";
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Image
} from "react-native";
export default class MsgNotification extends Component {
constructor(props) {
super(props);
this.state = {
ListData: [{
icon: require("../../assets/Mine/iconpic1.png"),
title: "评论回复",
time: "10小时前",
tips: "XXX回复了你的评论，点击查看",
},{
icon: require("../../assets/Mine/iconpic1.png"),
title: "评论回复",
time: "10小时前",
tips: "XXX回复了你的评论，点击查看",
},{
icon: require("../../assets/Mine/iconpic1.png"),
title: "评论回复",
time: "10小时前",
tips: "XXX回复了你的评论，点击查看",
},{
icon: require("../../assets/Mine/iconpic1.png"),
title: "评论回复",
time: "10小时前",
tips: "XXX回复了你的评论，点击查看",
}],
};
}
render() {
return (
<View style={styles.container}>
{this.state.ListData.map((item, index) => {
return (
<TouchableOpacity style={styles.itemContainer} key={index}>
<Image style={styles.itemIcon} source={item.icon} />
<View style={styles.itemLeft}>
<View style={styles.itemLeftTop}>
<Text style={styles.itemTitle}>{item.title}</Text>
<Text style={styles.itemTime}>{item.time}</Text>
</View>
<Text style={styles.itemTips}>{item.tips}</Text>
</View>
</TouchableOpacity>
)
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF",
paddingTop: 74
},
itemContainer: {
flexDirection: "row",
alignItems: "center",
height: 72,
padding: 13,
backgroundColor: "white",
marginBottom: 1,
},
itemIcon: {
width: 46,
height: 46,
marginRight: 13,
},
itemLeft: {
flex: 1
},
itemLeftTop: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
itemTitle: {
fontSize: 16,
color: "#030303"
},
itemTime: {
fontSize: 13,
color: "#999999"
},
itemTips: {
marginTop: 3,
fontSize: 13,
color: "#7A7A7A"
},
});