跳到主要内容

AvatarWithRing 圆环头像

带装饰环的文字头像，适合个人资料等需要强调头像的区域。

内核底色固定为品牌橙渐变(#F49443 → #EB6E00),ringColor 只控制外圈 ring 的颜色;label 基准字号约 size * 0.40,ring 宽度约 size * 0.0625(随 size 缩放)。ThemeProvider fontScale 只缩放 label 的字号与字距；总直径、ring、内核、渐变和 shadow 均保持原几何。

内部 SVG 渐变通过 useSvgId('av') 生成并消毒实例级 ID；同屏多个头像不会复用同一个渐变定义，也无需消费者传入或手工拼接 ID。

代码演示​

下方渲染的就是 src/components/business/AvatarWithRing/AvatarWithRing.tsx 本体。

默认 · 64 直径 · c.avatarRing ring
刘
A
张
size · 48 / 64 / 88 / 120
刘
刘
刘
刘
ringColor · 自定义 hex
A
B
C

用法​

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

{
  /* 个人名片屏 hero 头像 */
}
<AvatarWithRing label={userName.charAt(0)} size={96} />;

{
  /* 自定义品牌色 ring */
}
<AvatarWithRing label="A" ringColor="#3775F6" size={64} />;

API​

参数类型默认值说明
labelstring—中心文字(通常 1 字符,姓名首字)
sizenumber64总直径(含 ring),r() 缩放在内部处理
ringColorstringc.avatarRing外圈 ring 颜色(内核底色固定为品牌橙渐变,不受此控制)
styleStyleProp<ViewStyle>—容器附加样式(margin / position)

无障碍（a11y）​

来源：src/components/business/AvatarWithRing/AvatarWithRing.tsx、types.ts。

本组件为展示 / 装饰用，无交互（渲染为 <View> 外壳，内含 SVG 渐变 + <Text> label）。源码未设置任何 a11y prop（既无 accessibilityRole 也无 accessibilityLabel）——中心 label 仅作为可见 <Text> 渲染，因此 screen reader 默认会读到该文字，但不会带头像语义。如需承载语义（如可点击进入资料页），请由父级可点区域设置 accessibilityLabel / accessibilityRole。

主题键（Tokens）​

Token来源作用
c.avatarRinguseColors()外圈 ring 默认色(可被 ringColor 覆盖)
c.onPrimaryuseColors()中心 label 文字色(恒定白)
avatarGradient@unif/react-native-design内核渐变底(#F49443 → #EB6E00,亮 / 暗共用)
s.brandAvataruseTheme().shadow品牌橙光晕 shadow(暗色保留橙晕托起头像)
fw.bold@unif/react-native-designlabel 字重

视觉规范​

元素比例 / 取值
label 字号基准 size × 0.40，按 fontScale 缩放一次
label 字距基准 -0.5，按 fontScale 缩放一次；垂直方向只由 avatarCore flex 居中
ring 宽度size × 0.0625(下限 2px)
内核底色avatarGradient(135° 品牌橙渐变,固定)
渐变 IDuseSvgId('av') 自动生成；消毒 React ID 并保证合法开头
label 色c.onPrimary(恒定)
shadows.brandAvatar(品牌橙 elevation)

使用注意​

  • 不要塞多字符 label —— 设计是单字符(姓名首字 / 字母),多了会溢出
  • 不要替代 <Avatar> —— Avatar 是基础原子(无 ring),AvatarWithRing 是装饰强化版,仅用于视觉重心场景
  • 不要把 ringColor 当随机调色板 —— 优先复用 token(c.primary / c.info / c.success)