102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import { View, StyleSheet, Dimensions } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
const { width: screenWidth } = Dimensions.get('window')
|
|
const GALLERY_GAP = 1
|
|
const GALLERY_ITEM_SIZE = Math.floor(
|
|
(screenWidth - GALLERY_GAP * 2) / 3
|
|
)
|
|
|
|
export function WorksListSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 分类标签骨架 */}
|
|
<View style={styles.categoryContainer}>
|
|
{[1, 2, 3, 4].map((item) => (
|
|
<Skeleton
|
|
key={item}
|
|
width={50}
|
|
height={30}
|
|
borderRadius={8}
|
|
style={styles.categoryTag}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
{/* 作品列表骨架 */}
|
|
<View style={styles.scrollContent}>
|
|
{[1, 2].map((dateIndex) => (
|
|
<View key={dateIndex}>
|
|
<Skeleton width={100} height={14} borderRadius={4} style={styles.dateText} />
|
|
<View style={styles.galleryGrid}>
|
|
{[1, 2, 3, 4, 5, 6].map((item) => (
|
|
<View
|
|
key={item}
|
|
style={[
|
|
styles.galleryItem,
|
|
item % 3 !== 2 && styles.galleryItemMarginRight,
|
|
styles.galleryItemMarginBottom,
|
|
]}
|
|
>
|
|
<Skeleton
|
|
width="100%"
|
|
height={undefined}
|
|
borderRadius={0}
|
|
style={styles.gallerySkeleton}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
categoryContainer: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 16,
|
|
gap: 8,
|
|
},
|
|
categoryTag: {
|
|
marginBottom: 0,
|
|
},
|
|
scrollContent: {
|
|
paddingBottom: 20,
|
|
},
|
|
dateText: {
|
|
marginBottom: 8,
|
|
paddingLeft: 14,
|
|
},
|
|
galleryGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
},
|
|
galleryItem: {
|
|
width: GALLERY_ITEM_SIZE,
|
|
aspectRatio: 1,
|
|
overflow: 'hidden',
|
|
backgroundColor: '#1C1E22',
|
|
position: 'relative',
|
|
},
|
|
gallerySkeleton: {
|
|
width: '100%',
|
|
height: undefined,
|
|
aspectRatio: 1,
|
|
},
|
|
galleryItemMarginRight: {
|
|
marginRight: GALLERY_GAP,
|
|
},
|
|
galleryItemMarginBottom: {
|
|
marginBottom: GALLERY_GAP,
|
|
},
|
|
})
|
|
|