ui-component-library 是一套用于 Expo React Native 应用的组件库构建规范与模板,目标是在 src/ui/ 中建立统一、可测试、无障碍友好的共享展现型组件集。
用途与范围 提供约四十个展现型组件(如按钮、行、对话框、提示条、卡片等),由仓库内维护的组件目录 contracts/component-library.json 统一登记组件及其部件和可用外观。组件只负责“属性输入、JSX 输出”,不包含翻译 API、状态存储或服务调用。
核心规则 组件尺寸必须来自根据 token 文件生成的 component-specs.json,禁止手写数字;必要时可覆盖并注明原因。所有可按压交互统一组合 PressableSurface,不另用 Pressable、Touchable、核心 Button 或手势按钮,不手写按压外观。需要被测试或流程定位的组件必须接收必填 testID,并由其派生部件标识。每个可按压组件需有角色、已翻译名称和状态,装饰性部件同时对 VoiceOver 和 TalkBack 隐藏。每个状态除颜色外还需非颜色提示(勾选、文字状态、更宽的圆点、加粗边缘、虚线等),并为每个提示配有测试。默认不使用阴影和旋转,仅在目录标记允许时使用。动效需提供减弱动态效果版本,功能性计时器忽略减弱动态设置。
使用方式 工作流包括:先在仓库根目录运行检查脚本 check-components.mjs 获取待办清单;确认主题、AppText、PressableSurface、按压反馈上下文及测试工具等前置依赖;把设计测量值合并进 design/tokens.json 并运行 write-component-specs.mjs 生成规格;从 templates/ 复制组件目录、规格、图标槽、变体绘制、长按确认等文件及所需组件与测试;按需接入屏幕、补充对比度配对,最后运行 typecheck、eslint、jest 以及两个脚本直至通过。新增组件可参照参考文档的构建流程。
适用场景 适合已有 design-system-structure、单元测试与无障碍测试基础,希望以规则和自动化检查统一 UI 组件质量、一致性与无障碍表现的 Expo 应用团队。若设计需要平台原生控件,文档建议改用 Expo 的 expo-ui。
限制 脚本检查证明的是结构与规则,不能证明屏幕外观正确,外观需在设备截图上验证。文档未提供收费、价格或具体平台支持范围等信息,暂未提供。