Avatar 头像

圆形 monogram 头像(建议 1–2 字符)。brand / info / soft / neutral · xs 18 / sm 28 / md 32 / lg 40 / xl 56。可传 source 渲染真实头像图片,加载失败时自动回退到 label 文字。

蓝色规则

info 变体（蓝底 #3775F6）专用于用户头像。其它头像用 brand / soft / neutral。

实时预览

下方渲染的就是 src/components/ui/Avatar/Avatar.tsx 本体，通过 react-native-web 翻译成浏览器节点。

变体

AI

我

王

P

尺寸

1

A

A

A

A

xs（脚注引用 / 列表序号专用）

1

2

3

用法

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

<Avatar label="AI" variant="brand" size="lg" />
<Avatar label="我" variant="info" size="md" />
<Avatar label="王" variant="soft" />
<Avatar label="P" variant="neutral" size="sm" />

API

Prop	Type	默认	说明
label	string	—	显示文字(建议 1–2 字符);同时作为 a11y label,图片加载失败时回退展示
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	18 / 28 / 32 / 40 / 56
variant	'brand' | 'info' | 'soft' | 'neutral'	'neutral'	配色变体(仅在显示 label 时生效,有 source 时被图片覆盖)
source	ImageSourcePropType	—	真实头像图片({ uri } 或 require(...));优先渲染,onError 后回退 label
testID	string	—	E2E / 测试定位

xs（18px）专为内联序号 / 脚注引用使用 —— 例如 Sources 列表里的来源编号 badge。

主题键（Tokens）

Token	来源	作用
c.primary / c.onPrimary	useColors()	brand 变体底色 / 文字
c.info / c.onInfo	useColors()	info 变体底色 / 文字
c.primaryContainer / c.primary	useColors()	soft 变体底色 / 文字
c.surfaceContainerHighest / c.foreground	useColors()	neutral 变体底色 / 文字
avatar.xs … avatar.xl	@unif/react-native-design	五档容器直径(18 / 28 / 32 / 40 / 56)
fw.semi	@unif/react-native-design	label 字重

无障碍（a11y）

来源：src/components/ui/Avatar/Avatar.tsx、types.ts。

本组件为展示用，无交互（渲染为 <View>，不接收点击）。源码在根 <View> 上设了 accessibilityLabel={label}，且 label 为必填，因此 screen reader 会朗读该文字（即使 source 图片加载成功，朗读的仍是 label；图片加载失败时也回退展示 label）。无 accessibilityRole，继承底层 <View> 默认。如需让头像可点击，请由父级可点区域承载语义。

// label 同时作为 SR 朗读文案
<Avatar label="王" variant="info" />