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: 'System Notification', content: 'Welcome to RNPay. Bind a wallet to get started.', time: '10:00' },
|
|
{ id: '2', title: 'Proxy Connected', content: 'Proxy service connected to server successfully.', time: '10:05' },
|
|
{ id: '3', title: 'Bind Reminder', content: 'You have wallets pending setup. Go to Home to bind them.', 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,
|
|
},
|
|
});
|