React Native Web ActivityIndicator 组件完全指南：Props 详解、SVG 实现原理与实战示例

React Native Web ActivityIndicator 组件完全指南Props 详解、SVG 实现原理与实战示例【免费下载链接】react-native-webCross-platform React UI packages项目地址: https://gitcode.com/gh_mirrors/re/react-native-webActivityIndicator 是 react-native-web 提供的跨平台加载指示器组件用于在 Web 页面中展示正在加载/处理中的状态。本文基于 react-native-web 官方文档与源码完整讲解其全部 Props 的默认值与行为、底层基于 SVG 与 CSS 动画的实现原理、无障碍ARIA设计并附上可直接运行的实战示例与测试验证方式帮助你准确、无障碍地使用该组件。组件概览与基本用法ActivityIndicator 在 react-native-web 中被设计为与 React Native 原生端 API 完全对齐的组件从react-native导入后即可直接使用渲染结果是一个具有progressbar角色语义的 DOM 元素。import { ActivityIndicator } from react-native; ActivityIndicator {...props} /;在 react-native-web 组件导出入口 中可以看到ActivityIndicator与其他组件如View、Text、Button一同从./exports/ActivityIndicator导出。它没有任何必填参数——所有 Props 均有默认值因此最简单的用法就是直接渲染ActivityIndicator /。APIProps 全解析以下参数与官方文档完全一致并补充了各参数的实现细节与取值说明。...ViewProps继承自 View?ViewProps—— ActivityIndicator 支持 View 组件的全部 Props。从 实现源码 的类型定义可以确认type ActivityIndicatorProps { ...ViewProps, animating?: boolean, color?: ?string, hidesWhenStopped?: boolean, size?: small | large | number };这意味着你可以直接向它传递style、accessibilityLabel、accessibilityLiveRegion、nativeID、testID、dataSet、onBlur、onFocus等 View 属性它们会被透传到最外层的容器元素上。animating类型?boolean默认值true。设置指示器是否处于动画状态。源码中通过解构赋值给出默认值const { animating true, ... } props;当animating{false}时动画通过animationPlayState: paused被暂停指示器停止旋转。color类型?string默认值#1976D2Material Design 蓝色。设置指示器的颜色。该颜色会作为stroke应用到 SVG 圆环的两个circle上见下文实现原理。hidesWhenStopped类型?boolean默认值true。设置指示器在停止动画时是否隐藏。仅在animating{false}时生效此时会额外追加visibility: hidden样式若同时设置hidesWhenStopped{false}则指示器会停留在页面上但保持静止。size类型?(small | large | number)默认值small。设置指示器的尺寸取值渲染尺寸说明small20 × 20 px默认值large36 × 36 px大尺寸number如30宽高均为该数值任意像素尺寸通过内联height/width生效源码中定义了两种预置尺寸数值型尺寸则直接转为内联样式const indicatorSizes StyleSheet.create({ small: { width: 20, height: 20 }, large: { width: 36, height: 36 } }); // 渲染时 typeof size number ? { height: size, width: size } : indicatorSizes[size]底层实现原理SVG 圆环 CSS 关键帧动画与原生端使用平台原生控件不同react-native-web 的 ActivityIndicator 完全基于内联 SVG CSS 动画实现源码位于 ActivityIndicator 实现。SVG 双圆环结构组件渲染一个viewBox0 0 32 32的 SVG其中包含两个同心圆圆心cx16、cy16半径r14strokeWidth4底层圆环opacity: 0.2用于绘制浅色轨道上层圆环strokeDasharray: 80、strokeDashoffset: 60即只有部分弧线可见从而呈现弧段旋转的经典加载效果。const createSvgCircle (style) ( circle cx16 cy16 fillnone r14 strokeWidth4 style{style} / ); const svg ( svg height100% viewBox0 0 32 32 width100% {createSvgCircle({ stroke: color, opacity: 0.2 })} {createSvgCircle({ stroke: color, strokeDasharray: 80, strokeDashoffset: 60 })} /svg );CSS 旋转动画动画通过 StyleSheet 中定义的 CSS 关键帧完成一个完整周期 0.75 秒、匀速、无限循环animation: { animationDuration: 0.75s, animationKeyframes: [ { 0%: { transform: rotate(0deg) } }, { 100%: { transform: rotate(360deg) } } ], animationTimingFunction: linear, animationIterationCount: infinite }, animationPause: { animationPlayState: paused }, hidesWhenStopped: { visibility: hidden }三种状态的样式组合逻辑如下animating{true}正常播放animationanimating{false}追加animationPause动画暂停animating{false} hidesWhenStopped再追加hidesWhenStoppedvisibility: hidden使其不可见。无障碍ARIA语义组件外层容器被渲染为roleprogressbar并带有aria-valuemin{0}与aria-valuemax{1}向屏幕阅读器表明这是一个不确定进度的加载指示器。由于animating只影响视觉动画而非语义因此不会移除 ARIA 角色。从 组件测试快照 中可以看到完整的 DOM 输出div aria-valuemax1 aria-valuemin0 roleprogressbar div class... r-animationDuration-17bb2tj ... svg height100% viewBox0 0 32 32 width100% circle cx16 cy16 fillnone r14 stroke-width4 stylestroke: #1976D2; opacity: 0.2; / circle cx16 cy16 fillnone r14 stroke-width4 stylestroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60; / /svg /div /div实战示例尺寸、颜色与动态切换官方示例位于 react-native-web-examples 的 activity-indicator 页面展示了不同颜色、尺寸组合以及通过animating状态控制的动态切换是理解组件用法的直接参考import { ActivityIndicator, StyleSheet, View } from react-native; import React from react; export default function ActivityIndicatorPage() { const [animating, setAnimating] React.useState(true); // 每 2 秒切换一次动画状态模拟加载开始/结束 React.useEffect(() { const interval setInterval(() { setAnimating(!animating); }, 2000); return () { clearInterval(interval); }; }, [animating]); return ( View View style{styles.row} {/* 默认配置 */} ActivityIndicator style{styles.item} / {/* 停止动画但不隐藏 */} ActivityIndicator animating{false} hidesWhenStopped{false} style{styles.item} / {/* 由定时器控制的动画状态 */} ActivityIndicator animating{animating} hidesWhenStopped{false} style{styles.item} / /View View style{styles.row} ActivityIndicator color#1DA1F2 sizesmall style{styles.item} / ActivityIndicator color#17BF63 size{20} style{styles.item} / /View View style{styles.row} ActivityIndicator color#FFAD1F sizelarge style{styles.item} / ActivityIndicator color#F45D22 size{36} style{styles.item} / /View View style{styles.row} ActivityIndicator color#794BC4 size{60} style{styles.item} / /View /View ); }几个值得注意的实战要点自定义颜色color支持任意 CSS 颜色字符串如示例中的 Twitter 蓝#1DA1F2、Twitter 绿#17BF63等任意尺寸size可传任意数字如20、36、60对应渲染为等宽等高的指示器停止但保留占位当需要加载完成但保留视觉占位时使用animating{false} hidesWhenStopped{false}内联样式透传style如示例中的paddingHorizontal会合并到外层容器用于间距布局。该示例页面可以通过官方文档内嵌的 CodeSandbox 交互运行由 macros.html 中的 codesandbox 宏 注入也可以在本地启动 examples 项目后访问cd packages/react-native-web-examples npm install npm run dev测试验证组件行为的回归保障组件行为由 index-test.js 测试套件 覆盖主要验证内容包括动画与隐藏状态animating为true/false时的渲染输出hidesWhenStopped为true/false时的快照差异颜色colorred时 SVG 中circle的stroke为red尺寸sizelarge与size{30}数值分别生成预置类名与内联height/width: 30pxView Props 透传accessibilityLabel、accessibilityLiveRegion、dataSet、nativeID、testID、style、ref、onBlur、onFocus均按预期渲染或触发。从快照文件可以看出数值尺寸size{30}时内联样式为styleheight: 30px; width: 30px;而字符串尺寸则生成原子 CSS 类名如r-width-19wmn03这正是 react-native-web StyleSheet 编译机制将 React Native 样式编译为原子 CSS在组件上的体现。小结ActivityIndicator 是 react-native-web 中一个小而完整的组件API 与 React Native 对齐、零依赖 SVG 渲染、CSS 关键帧驱动动画、内置 ARIA 无障碍语义并有完整测试覆盖。实际开发时只需记住五个核心 Propsanimating、color、hidesWhenStopped、size、以及继承自 View 的其余属性即可在 Web 端复刻原生加载体验。相关源码、测试与示例均可在本仓库的 组件实现、测试用例 与 示例页面 中继续深入研读。【免费下载链接】react-native-webCross-platform React UI packages项目地址: https://gitcode.com/gh_mirrors/re/react-native-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考