SuperAPI AI 工具集

tamagui-best-practices

前端与建站

查看项目

更新于 10-15 19:55

技能介绍

用途:在 Tamagui 项目(tamagui.config.ts、@tamagui 导入)中提供基础之外的最佳实践,覆盖 Config v4、编译器优化、复合组件与常见陷阱。写代码前应先阅读按场景划分的参考文件:对话框与模态层用 @DIALOG_PATTERNS.md(Adapt 组件、无障碍);表单与校验用 @FORM_PATTERNS.md(zod 集成);动画与过渡用 @ANIMATION_PATTERNS.md(驱动、enterStyle/exitStyle);浮层用 @OVERLAY_PATTERNS.md(Popover、Tooltip、Select);编译器优化用 @COMPILER_PATTERNS.md;设计令牌与主题用 @DESIGN_SYSTEM.md。

Config v4:可通过 @tamagui/config/v4 的 defaultConfig 配合 createTamagui 做最小配置,新项目可加 styleCompat: 'react-native' 使 flexBasis 与 React Native 行为一致;自定义主题用 createThemes 的 palette/accent/childrenThemes。

编译器优化:优先用 styled() 的 variants 而非内联条件,避免带变量的 style={{ ... }};createStyledContext 会关闭扁平化,宜用于 Button、Card 这类高层组件而非基础组件。styled() 用于可复用、变体驱动、可被编译器优化的组件,内联 props 仅做一次性布局调整;variants 对象应始终写 as const。

关键陷阱:prop 顺序决定覆盖优先级,展开之后的 prop 无法被调用方覆盖;variants 顺序为先列出者被后列出者覆盖;包装 styled 组件时用 .styleable() 保留变体继承;非标准令牌可用 accept 指定(如 SVG 的 fill/stroke、contentContainerStyle);同一项目内统一从 tamagui、@tamagui/core 或 @tamagui/button 之一导入,不要混用 RN StyleSheet;Dialog/Sheet 的平台分支用 Adapt 而非 Platform.OS。

速查:Config v4 简写 bg、p、m、w、h、br;断点 $xs 660px、$sm 800px、$md 1020px、$lg 1280px、$xl 1420px;动画驱动 web 默认 css,原生需 react-native-reanimated;令牌 $ 前缀用于 props,主题定义中省略。获取最新文档:curl -sL "https://tamagui.dev/docs/core/configuration.md",curl -sL "https://tamagui.dev/llms.txt"。其余支持范围与限制资料未提供。