79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import React, { Component } from 'react';
|
||
import { View, Text, StyleSheet, FlatList } from 'react-native';
|
||
|
||
interface Message {
|
||
id: string;
|
||
title: string;
|
||
content: string;
|
||
time: string;
|
||
}
|
||
|
||
const MOCK_MESSAGES: Message[] = [
|
||
{ id: '1', title: '系统通知', content: '欢迎使用 RNPay，绑定钱包开始使用。', time: '10:00' },
|
||
{ id: '2', title: '代理连接', content: '代理服务已成功连接到服务器。', time: '10:05' },
|
||
{ id: '3', title: '绑定提醒', content: '您有钱包待绑定，请前往首页操作。', time: '10:10' },
|
||
];
|
||
|
||
export default class MessageScreen extends Component {
|
||
renderItem = ({ item }: { item: Message }) => (
|
||
<View style={styles.item}>
|
||
<View style={styles.itemHeader}>
|
||
<Text style={styles.itemTitle}>{item.title}</Text>
|
||
<Text style={styles.itemTime}>{item.time}</Text>
|
||
</View>
|
||
<Text style={styles.itemContent}>{item.content}</Text>
|
||
</View>
|
||
);
|
||
|
||
render() {
|
||
return (
|
||
<View style={styles.container}>
|
||
<FlatList
|
||
data={MOCK_MESSAGES}
|
||
keyExtractor={item => item.id}
|
||
renderItem={this.renderItem}
|
||
contentContainerStyle={styles.list}
|
||
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#f5f5f5',
|
||
},
|
||
list: {
|
||
padding: 12,
|
||
},
|
||
item: {
|
||
backgroundColor: '#fff',
|
||
borderRadius: 8,
|
||
padding: 14,
|
||
},
|
||
itemHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 6,
|
||
},
|
||
itemTitle: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
color: '#333',
|
||
},
|
||
itemTime: {
|
||
fontSize: 12,
|
||
color: '#999',
|
||
},
|
||
itemContent: {
|
||
fontSize: 13,
|
||
color: '#666',
|
||
lineHeight: 20,
|
||
},
|
||
separator: {
|
||
height: 8,
|
||
},
|
||
});
|