Initial commit: expo-popcore-app

components/skeleton/MySkeleton.tsx

@@ -0,0 +1,123 @@
+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,
+    },
+})
+