Skeleton 骨架屏

页面加载占位，呈现内容大致结构。区别于 Shimmer（聊天专属流式占位）——Skeleton 是页面级。

实时预览

下方渲染的就是 src/components/ui/Skeleton/* 本体（reanimated 4 worklet 驱动 opacity 脉冲），通过 react-native-web 翻译成浏览器节点。

列表项骨架

卡片骨架

视觉规范

元素	规则
颜色	#F0F0F0 (bg-muted)
圆角	行：3px / 圆：50% / 矩形：4–8px
动画	opacity 脉冲（共享 usePulse hook），半周期 700ms，全周期 1.4s，0.5 ↔ 1

形状

shape	默认值	用途
'line'	width 100% / height 11 / radius 3	文本占位
'rect'(默认)	width 100% / height 80 / radius 8	图片 / 卡片占位
'circle'	size 40 / radius = size/2	头像占位

用法

import { Skeleton } from '@unif/react-native-design';

{/* 列表项骨架 */}
<View>
  <Skeleton shape="circle" size={40} />
  <View style={{ flex: 1, gap: 8 }}>
    <Skeleton shape="line" width="60%" height={14} />
    <Skeleton shape="line" width="80%" height={11} />
  </View>
</View>

{/* 卡片骨架 */}
<Skeleton shape="rect" width="100%" height={120} radius={12} />

单一组件 + shape prop(MUI Skeleton 同款 variant 模式),旧的 Skeleton.Line / .Rect / .Circle 命名空间访问已移除。

与 Shimmer 的区别

Skeleton	Shimmer (chat)
页面级，初次加载	单个气泡里，AI 思考中
整体块状（卡片、行）	几行不等宽 + 头像
加载完成后整体替换	气泡内文字流式填充