Loading 加载

旋转加载指示器。size 调直径（默认 18，< 8 会被钳到 8），thickness 调描边粗细（默认 2），color 默认主橙 c.primary。

实时预览

下方渲染的就是 src/components/ui/Spinner/Spinner.tsx 本体（reanimated 4 worklet 驱动旋转动画），通过 react-native-web 翻译成浏览器节点。

尺寸

颜色

thickness · 描边粗细

用法

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

function Demo() {
  const c = useColors();
  return (
    <>
      <Spinner />                                       {/* 默认 18px 主橙 */}
      <Spinner size={24} />                             {/* 24px */}
      <Spinner color={c.success} />                     {/* 绿色 */}
      <Spinner color={c.foregroundSubtle} thickness={1.5} />  {/* 细线灰 */}
    </>
  );
}

API

Prop	Type	默认	说明
size	number?	18	直径（含 stroke）；非有限或 < 8 钳到 8（打 warn）
color	string?	c.primary（运行期 hook 取）	旋转弧颜色（轨道色固定 c.outline）
thickness	number?	2	描边粗细；≤ 0 fallback 到 2
style	StyleProp<ViewStyle>?	—	外层样式
testID	string?	—	E2E / 测试定位

无障碍（a11y）

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

Spinner 是纯视觉旋转指示器，源码刻意把自己对 SR 隐藏：根节点（native 的 Animated.View / web 的 View）显式设 accessibilityElementsHidden + importantForAccessibility="no-hide-descendants"（两端实现一致）。它不设 accessibilityRole='progressbar'、也不设 accessibilityState={{ busy }} 或 accessibilityLabel。

因此「正在加载」的语义必须由外部上下文声明 —— 例如在包裹容器上设 accessibilityState={{ busy: true }}、或用一段状态文案（如 <Text>加载中…</Text> / live region）告知 SR；不要指望 Spinner 自身朗读。组件本身无可配置的 a11y prop（仅 size / color / thickness / style / testID）。

节奏

900ms 一圈，线性 easing，不要回弹。这是设计令牌 motion 之外的特例——加载体感需要稳定均匀。