跳到主要内容

VersionPill 版本号药丸

About / Splash / 调试面板等显版本号的小药丸。左侧状态点 + 版本号 + 可选 build 后缀,圆角胶囊。

实时预览​

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

基础 · 仅版本号
版本 2.8.0
带 build 号
版本 2.8.0
·
build 20260525
statusColor · 自定义状态点
版本 2.8.0
版本 2.8.0-beta
版本 2.8.0-rc1

用法​

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

{/* About 屏底 */}
<VersionPill version="0.2.0" />

{/* 内测版本醒目 */}
<VersionPill version="2.8.0-beta" statusColor="#EB6E00" build="20260525" />

API​

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

PropType默认说明
versionstring—版本号字串（'2.8.0'，必填）
buildstring?—build 号；为空时省略分点与 build 字
statusColorstring?c.success左侧 5×5 圆点颜色
styleStyleProp<ViewStyle>?—容器附加样式覆盖

视觉规范（Tokens）​

来源：src/components/business/VersionPill/styles.ts。

元素规则
胶囊c.surface 底 + hairline c.outline 边，圆角 radius.pill（999），横向 padding 11 / 纵向 5
状态点5×5 圆点（radius.pill），色由 statusColor 决定（默认 c.success）
版本文字type.microPlus（11.5）+ c.foregroundMuted + tabular-nums（等宽数字）
分隔点·，type.microPlus + opacity 0.5
build 文字type.micro（11）+ c.foregroundMuted + 等宽字体（fontMono）

无障碍（a11y）​

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

VersionPill 是纯展示徽章，源码为 <View> + 若干 <Text>（版本 {version}、可选 · build {build}），未设置任何 accessibilityRole，也没有可传的 a11y prop（无 accessibilityLabel）。底层 <Text> 默认对 screen reader 可读，会按"版本 … / build …"顺序逐段朗读必填的 version（及 build）；左侧 statusColor 圆点是装饰 <View>，无文本、不被朗读。无受控状态（checked / selected / disabled 均不适用）。

不要​

  • 不要硬编码 version —— 走 @/config/brand 的 APP_VERSION(package.json 派生),build 走 react-native-device-info getBuildNumber()
  • 不要把 statusColor 滥用成"主题色徽章" —— 它的语义是"状态指示",通常 c.success(正常,默认)/ c.primary 或 c.info(beta / 内测)/ c.error(已废)