93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
// 骨架屏占位组件
|
|
const SkeletonItem = () => (
|
|
<View style={styles.skeletonItem} />
|
|
);
|
|
|
|
const SkeletonOwner = () => {
|
|
const insets = useSafeAreaInsets();
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
{/* 用户信息骨架屏 */}
|
|
<View style={styles.section}>
|
|
<View style={styles.userInfoHeader}>
|
|
<SkeletonItem />
|
|
<View style={styles.userInfoTextContainer}>
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
</View>
|
|
</View>
|
|
<View style={styles.userInfoStats}>
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
</View>
|
|
</View>
|
|
|
|
{/* 会员卡骨架屏 */}
|
|
<View style={styles.section}>
|
|
<SkeletonItem />
|
|
</View>
|
|
|
|
{/* 作品数据骨架屏 */}
|
|
<View style={styles.section}>
|
|
<View style={styles.countContainer}>
|
|
<SkeletonItem />
|
|
<SkeletonItem />
|
|
</View>
|
|
</View>
|
|
|
|
{/* 排行榜骨架屏 */}
|
|
<View style={styles.section}>
|
|
<SkeletonItem />
|
|
<View style={styles.rankingList}>
|
|
{Array(3).fill(0).map((_, index) => (
|
|
<SkeletonItem key={`ranking-${index}`} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
},
|
|
section: {
|
|
marginBottom: 16,
|
|
},
|
|
skeletonItem: {
|
|
backgroundColor: '#E1E1E1',
|
|
borderRadius: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
userInfoHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
userInfoTextContainer: {
|
|
flex: 1,
|
|
marginLeft: 16,
|
|
},
|
|
userInfoStats: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
},
|
|
countContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
gap: 16,
|
|
},
|
|
rankingList: {
|
|
marginTop: 16,
|
|
},
|
|
});
|
|
|
|
export default SkeletonOwner;
|