跳到主要内容

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​

PropType默认说明
versionstring—版本号字串('2.8.0')
buildstring?—build 号;为空时省略分点与 build 字
statusColorstring?c.success左侧 4×4 圆点颜色
styleStyleProp<ViewStyle>—容器附加样式

不要​

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