58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { View, StyleSheet } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
export function ChannelsSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 标题栏骨架 */}
|
|
<View style={styles.header}>
|
|
<Skeleton width={60} height={16} borderRadius={4} />
|
|
<Skeleton width={22} height={22} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 频道选择区域骨架 */}
|
|
<View style={styles.channelsSection}>
|
|
<View style={styles.channelsGrid}>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map((item) => (
|
|
<Skeleton
|
|
key={item}
|
|
width={80}
|
|
height={32}
|
|
borderRadius={100}
|
|
style={styles.channelButton}
|
|
/>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#0A0A0A',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingTop: 27,
|
|
paddingBottom: 12,
|
|
},
|
|
channelsSection: {
|
|
paddingHorizontal: 12,
|
|
paddingBottom: 12,
|
|
},
|
|
channelsGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
},
|
|
channelButton: {
|
|
marginBottom: 0,
|
|
},
|
|
})
|
|
|