Radio 单选

单选控件——20×20 圆，未选透明描边、已选主橙描边 + 中心 8×8 主橙圆点。

实时预览

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

报表周期

客户等级

当前：日报 · VIP

状态

状态	视觉
未选	20×20 圆，1.5px 描边 #EDEDED
已选	20×20 圆，1.5px 主橙描边 + 中心 8×8 主橙圆点
禁用	opacity: 0.5

用法

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

<Radio.Group value={tier} onChange={setTier}>
  <Radio value="vip"     label="VIP 客户" />
  <Radio value="normal"  label="普通客户" />
  <Radio value="pending" label="待审核客户" />
</Radio.Group>

API

<Radio.Group>

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

Prop	Type	默认	说明
value	string | number	—	当前选中值（受控）
onChange	(value: string | number) => void	—	切换回调
children	ReactNode	—	<Radio> 列表（渲染为普通 <View>，组内 gap: space[1]）
testID	string?	—	容器 testID；每个 Radio 自动派生 ${testID}-${value}

<Radio>

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

Prop	Type	默认	说明
value	string | number	—	此项的值（与 Group 的 value 比较得 checked）
label	string?	—	右侧文字；同时作为 accessibilityLabel（可选，不传则仅渲染圆点、无朗读文案）
disabled	boolean?	false	禁用（opacity: 0.5 + 不响应）
testID	string?	—	单项 testID（不传则从父 Group 派生 ${groupTestID}-${value}）

<Radio> 必须放在 <Radio.Group> 内使用；脱离 Group 会打 warn 并渲染空 <View>。

无障碍（a11y）

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

• 默认 accessibilityRole：每个 <Radio> 在其 <Pressable> 上硬编码 'radio'。<Radio.Group> 渲染为普通 <View>，源码未设置 radiogroup role（仅作布局容器 + Context 派发，无 group 语义）。
• a11y props：accessibilityLabel 取自 label，但 label 在 types.ts 中是可选的（label?）——不传 label 时（仅渲染圆点）无朗读文案，此时应由外部上下文提供语义。
• 状态语义：accessibilityState={{ checked, disabled: !!disabled }}——checked 由 Radio.Group 的受控 value 派生（ctx.value === value），disabled 映射本项 disabled prop。

// label 同时作为 SR 朗读文案；checked 由 Group 的 value 决定
<Radio.Group value={tier} onChange={setTier}>
  <Radio value="vip" label="VIP 客户" />
  <Radio value="normal" label="普通客户" />
</Radio.Group>

与 Checkbox 的区别

Radio	Checkbox
同组只能选一个	多选
圆形指示器	方形指示器
用 <Radio.Group> 包裹	独立使用，多个 <Checkbox>
适合"在 N 个选项中选一个"	适合"勾选若干项"