71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { View, StyleSheet, Dimensions } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
const { width: screenWidth } = Dimensions.get('window')
|
|
const horizontalPadding = 8 * 2
|
|
const cardGap = 5
|
|
const cardWidth = (screenWidth - horizontalPadding - cardGap) / 2
|
|
|
|
export function TemplateDetailSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 标题区域骨架 */}
|
|
<View style={styles.titleSection}>
|
|
<Skeleton width="80%" height={24} borderRadius={4} style={styles.mainTitle} />
|
|
<Skeleton width="60%" height={18} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 图片网格骨架 */}
|
|
<View style={styles.gridContainer}>
|
|
{[1, 2, 3, 4, 5, 6].map((item, index) => (
|
|
<View
|
|
key={item}
|
|
style={[
|
|
styles.card,
|
|
{ width: cardWidth },
|
|
index % 2 === 0 ? styles.cardLeft : styles.cardRight,
|
|
]}
|
|
>
|
|
<Skeleton
|
|
width={cardWidth}
|
|
height={cardWidth * 1.2}
|
|
borderRadius={16}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
titleSection: {
|
|
paddingHorizontal: 12,
|
|
paddingBottom: 24,
|
|
gap: 4,
|
|
},
|
|
mainTitle: {
|
|
marginBottom: 4,
|
|
},
|
|
gridContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
paddingHorizontal: 8,
|
|
justifyContent: 'space-between',
|
|
},
|
|
card: {
|
|
marginBottom: 12,
|
|
},
|
|
cardLeft: {
|
|
marginRight: 0,
|
|
},
|
|
cardRight: {
|
|
marginLeft: 0,
|
|
},
|
|
})
|
|
|