66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { View, StyleSheet } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
export function MessageSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 标签选择器骨架 */}
|
|
<View style={styles.segment}>
|
|
<Skeleton width={40} height={20} borderRadius={4} />
|
|
<Skeleton width={60} height={20} borderRadius={4} />
|
|
<Skeleton width={40} height={20} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 消息卡片骨架 */}
|
|
<View style={styles.cardsContainer}>
|
|
{[1, 2, 3, 4].map((item) => (
|
|
<View key={item} style={styles.card}>
|
|
<Skeleton width="60%" height={18} borderRadius={4} style={styles.cardTitle} />
|
|
<Skeleton width="80%" height={14} borderRadius={4} style={styles.cardSubtitle} />
|
|
<Skeleton width="100%" height={100} borderRadius={12} style={styles.cardBody} />
|
|
<Skeleton width="40%" height={12} borderRadius={4} style={styles.cardTime} />
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
segment: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 8,
|
|
paddingTop: 19,
|
|
paddingBottom: 12,
|
|
gap: 16,
|
|
},
|
|
cardsContainer: {
|
|
paddingHorizontal: 4,
|
|
paddingTop: 12,
|
|
},
|
|
card: {
|
|
backgroundColor: '#16181B',
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
marginHorizontal: 4,
|
|
},
|
|
cardTitle: {
|
|
marginBottom: 8,
|
|
},
|
|
cardSubtitle: {
|
|
marginBottom: 16,
|
|
},
|
|
cardBody: {
|
|
marginBottom: 12,
|
|
},
|
|
cardTime: {
|
|
marginTop: 0,
|
|
},
|
|
})
|
|
|