124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import { View, StyleSheet, Dimensions } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
const { width: screenWidth } = Dimensions.get('window')
|
|
const GALLERY_GAP = 2
|
|
const GALLERY_HORIZONTAL_PADDING = 0
|
|
const GALLERY_ITEM_SIZE = Math.floor(
|
|
(screenWidth - GALLERY_HORIZONTAL_PADDING * 2 - GALLERY_GAP * 2) / 3
|
|
)
|
|
|
|
export function MySkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 顶部积分与设置骨架 */}
|
|
<View style={styles.topBar}>
|
|
<Skeleton width={80} height={32} borderRadius={100} />
|
|
<Skeleton width={32} height={32} borderRadius={100} />
|
|
</View>
|
|
|
|
{/* 个人信息区骨架 */}
|
|
<View style={styles.profileSection}>
|
|
<Skeleton width={64} height={64} borderRadius={32} />
|
|
<View style={styles.profileInfo}>
|
|
<Skeleton width={100} height={20} borderRadius={4} style={styles.profileName} />
|
|
<Skeleton width={80} height={14} borderRadius={4} />
|
|
</View>
|
|
<Skeleton width={60} height={28} borderRadius={6} />
|
|
</View>
|
|
|
|
{/* 标题行骨架 */}
|
|
<View style={styles.sectionHeader}>
|
|
<Skeleton width={80} height={18} borderRadius={4} />
|
|
<Skeleton width={20} height={20} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 作品九宫格骨架 */}
|
|
<View style={styles.galleryGrid}>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9].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>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
topBar: {
|
|
paddingHorizontal: GALLERY_HORIZONTAL_PADDING,
|
|
paddingTop: 19,
|
|
paddingRight: 16,
|
|
backgroundColor: '#090A0B',
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
gap: 12,
|
|
},
|
|
profileSection: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingLeft: 16,
|
|
paddingRight: 16,
|
|
marginTop: 20,
|
|
marginBottom: 32,
|
|
backgroundColor: '#090A0B',
|
|
gap: 16,
|
|
},
|
|
profileInfo: {
|
|
flex: 1,
|
|
gap: 4,
|
|
},
|
|
profileName: {
|
|
marginBottom: 4,
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 12,
|
|
marginHorizontal: 12,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
galleryGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
marginBottom: 10,
|
|
},
|
|
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,
|
|
},
|
|
})
|
|
|