73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
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,
|
|
},
|
|
})
|