expo-popcore-app/components/skeleton/HomeSkeleton.tsx

import { Dimensions, View, StyleSheet } from 'react-native'
import { Skeleton } from './skeleton'

const { width: screenWidth } = Dimensions.get('window')

const horizontalPadding = 8 * 2
const cardGap = 5
const numColumns = 3
const cardWidth = (screenWidth - horizontalPadding - cardGap * (numColumns - 1)) / numColumns

export function HomeSkeleton() {
    return (
        <View style={styles.container}>
            {/* 标签骨架屏 */}
            <View style={styles.tabsContainer}>
                {[1, 2, 3, 4].map((_, index) => (
                    <Skeleton
                        key={index}
                        width={60}
                        height={20}
                        borderRadius={4}
                        style={styles.tabSkeleton}
                    />
                ))}
            </View>

            {/* 卡片骨架屏 */}
            <View style={styles.gridContainer}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, index) => (
                    <View
                        key={index}
                        style={[
                            styles.cardSkeleton,
                            { width: cardWidth },
                        ]}
                    >
                        <Skeleton
                            width="100%"
                            height={cardWidth * 1.2}
                            borderRadius={16}
                        />
                    </View>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#090A0B',
    },
    tabsContainer: {
        flexDirection: 'row',
        paddingHorizontal: 16,
        paddingVertical: 12,
        gap: 20,
        marginBottom: 18,
    },
    tabSkeleton: {
        marginBottom: 8,
    },
    gridContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingHorizontal: 8,
        gap: 5,
    },
    cardSkeleton: {
        marginBottom: 12,
    },
})