Thumbnail 缩略图

列表 / 卡片右侧、chat 行内、Detail 头图 通用的小型预览图。固定 16:9.5 视频比,提供 sm / md / lg 三档尺寸。bg 占位 c.surfaceContainer,图未加载 / 失败时不出现空白闪烁。

Size	尺寸	用法
sm	64×40	chat 行内、列表二级缩略
md(默认)	113×67	NewsList / NewsArea 公告右侧
lg	160×96	详情页 hero 小图、卡片头图

实时预览

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

三档尺寸 · sm / md / lg

selected · 外侧 2pt 品牌色 ring

用法

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

// 远程 URL —— 列表行最常见
<Thumbnail uri={item.coverUrl} />

// 自定义尺寸
<Thumbnail uri={item.coverUrl} size="lg" />

// 本地图片(降级 / placeholder)
<Thumbnail source={require('./fallback.png')} />

// 无图(uri / source 都空)→ 返回 null,不占布局
<Thumbnail uri={maybeEmpty} />

API

Prop	类型	默认	说明
uri	string	—	远程 URL,优先于 source
source	ImageSourcePropType	—	RN Image source(本地 require / 完整对象)
size	'sm' | 'md' | 'lg'	'md'	尺寸阶梯
resizeMode	'cover' | 'contain' | 'stretch' | 'center'	'cover'	RN Image.resizeMode
style	StyleProp<ImageStyle>	—	微调样式(marginLeft 等),不覆盖 size 尺寸
accessibilityLabel	string	—	SR 描述。不传 RN Image 默认 hidden
testID	string	—	测试

无障碍（a11y）

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

Thumbnail 是一张 <Image>（可选外套 ring <View>），未硬编码 accessibilityRole，a11y 走"可选描述"模型：

• a11y props：accessibilityLabel 是可选的（accessibilityLabel?）。源码同时按 accessible={!!accessibilityLabel} 控制可访问性——不传 accessibilityLabel 时该图对 screen reader 默认隐藏（装饰图不打扰朗读）；传了才作为带描述的图片暴露。
• 状态语义：源码有 selected prop（选中时外层套 2pt 品牌色 ring <View>），但该 ring 仅为视觉，源码未给它设置 accessibilityState（无 selected a11y 上报）；选中语义需由承载它的可选父级（如 picker 单元）提供。
• 无图（uri / source 都空）时组件返回 null，不渲染任何节点。

// 内容图：给 accessibilityLabel 才会被 SR 读到
<Thumbnail uri={item.coverUrl} accessibilityLabel="客户门店照片" />
// 纯装饰缩略图：省略 accessibilityLabel → 对 SR 隐藏
<Thumbnail uri={item.coverUrl} />

内部使用

• NewsList / NewsArea —— newsToCellItem 共享 mapper 内 extra: <Thumbnail uri={images[0]} />,两屏渲染一致

设计原则

新增"列表 / 卡片右侧缩略图 / chat 内嵌图片预览"场景请直接用 Thumbnail,不要自画 <Image style={{width, height, borderRadius, bg}}>。尺寸阶梯不够覆盖时来这里加 size,不要 inline 写死。