Tamagui

当需要在React Web和React Native之间共享UI代码且追求极致性能时，Tamagui通过优化编译器将样式化组件扁平化为原子CSS或原生View，解决跨平台开发中“写一次、跑得好”的三角难题。

核心能力：样式库 + 编译器 + UI套件

Tamagui由三个层级组成：@tamagui/core提供约24KB无外部依赖的样式库，支持React Native样式API超集；@tamagui/static编译器通过部分求值、CSS提取、树扁平化和死代码消除将运行时开销降至0；tamagui UI套件提供跨平台可组合组件，类似Radix但适配Web与原生。

• 核心体积: @tamagui/core仅依赖React，压缩后约24KB（Web端约28KB）
• 编译器优化: 支持Next.js、Webpack、Vite、Babel、Metro五种打包工具
• 输出形式: Web端生成原子CSS类名，原生端提升样式对象为顶层常量
• 主题系统: 主题像CSS变量一样向下继承，编译为CSS避免重渲染
• 响应式: 内联props或styled函数支持媒体查询，编译为原子CSS
• 基准测试: 官方基准显示编译器显著降低JS包体积并提升渲染性能

与同类工具的差异

不同于Styled Components或Emotion的纯运行时方案，Tamagui通过编译时优化同时兼顾开发体验与生产性能。相比React Native Web，它提供更完整的SSR支持、更轻的包体积以及主题和响应式系统的深度集成。

• vs React Native Web: 完全API兼容，但包更小、SSR更强、功能更多
• vs Stitches: 继承其variants模式，但增加跨平台支持
• vs Radix: 类似API但同时工作于Web和原生，且内置Adapt原语用于平台适配
• vs 纯0-runtime库: 支持运行时和编译时双模式，不限制逻辑内联写法

快速上手与集成方式

推荐通过CLI脚手架创建新项目，支持从简单示例到生产级monorepo的多种模板。现有项目可逐步引入@tamagui/core开始，再按需启用编译器。

• 启动命令: npm create tamagui@latest 生成项目模板
• 集成路径: 先使用@tamagui/core和styled函数，再添加@tamagui/static编译器
• 框架支持: 官方示例覆盖Expo Router和Next.js两种路由方案
• 社区资源: 爱獭知识社区提供中文入门指南，涵盖核心概念、主题系统、动画等

常见问题

Q1：Tamagui的编译器如何提升性能？

A1：编译器@tamagui/static对样式组件进行部分求值、静态提取、树扁平化和死代码消除。在Web上，它将组件扁平化为div并生成原子CSS，仅应用必要样式，减少CSS体积和渲染开销；在原生上，将样式对象提升为常量，避免重复创建。官方首页经编译器优化后Lighthouse得分提升约15%。

Q2：Tamagui能否与现有React Native项目集成？

A2：可以。Tamagui设计为逐步采用：先安装@tamagui/core替换React Native Web，样式API完全兼容；再按需添加编译器。它支持Metro打包器，与Expo和React Native CLI项目兼容。

Q3：Tamagui UI套件与Radix有何区别？

A3：Tamagui UI提供类似Radix的无样式和有样式组件，但核心差异在于跨平台：所有组件同时工作于Web和React Native。它还包含Adapt原语，允许组件根据平台或媒体查询自动切换形态（如移动端用Sheet，桌面端用Dialog）。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。