Tamagui 跨端 UI 架构解析一套代码、优化编译器与渐进式接入指南【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamaguiTamagui 是一个让 ReactWeb与 React Native 共享同一份 UI 代码的样式库 设计系统 组合式组件生态其核心竞争力是一台优化编译器在 Web 端把 styled 组件压平为普通div加原子化 CSS在原生端把样式对象提升hoist到View上从而在共享代码的同时保住两端各自最擅长的性能形态。本文基于开源仓库README.md的核心主张结合 monorepo 中真实的编译器源码、UI kit 导出结构和贡献者工作流完整讲清 Tamagui 的三层包体系、编译器工作机制、starter 上手路径与本地开发/测试流程。1. Tamagui 是什么三个核心包定位仓库 README 将 Tamagui 定义为 Style library, design system, composable components, and more即一组用于构建可在 React 与 React Native 间共享代码的 UI 库。对外交付物由三个核心包组成包定位仓库对应源码tamagui/coreReact 通用样式库styled、tokens、themes、View 等基础能力code/core/core 及 code/core 下大量tamagui/*基础包tamagui/static与core/tamagui配合工作的优化编译器code/compiler/statictamagui适配所有平台的 UI kitButton、Sheet、Dialog 等组件code/ui/tamagui组件实现分布在 code/ui 各子包整个仓库是一个 bun turbo 驱动的 monorepopackage.json 中的workspaces声明了五大区code/compiler/**编译器全家桶、code/core/**核心库、code/ui/**UI 组件、code/packages/**配套工具包以及code/starters/*、code/sandbox、code/kitchen-sink等应用级工程。README 强调的价值主张值得逐句拆解Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.——共享代码的两大传统牺牲品是性能与代码质量Tamagui 的回答是平台特化的编译期输出而不是运行时模拟另一个平台。2. 优化编译器README 核心主张的源码级验证README 对编译器机制的原始描述是It does this with an optimizing compiler that outputs platform-specific optimizations - it turns styled components, even with complex logic or cross-module imports, into a simpledivalongside atomic CSS on the web, or a View with its style objects hoisted on native.这句话对应到编译器源码中可以逐字验证。编译器入口在 code/compiler/static/src核心提取逻辑位于 extractor 目录createExtractor.ts基于 Babel AST 遍历的提取器主实现约 3000 行负责识别 styled 调用、评估组件属性、判断哪些样式可以静态化。源码中明确维护了UNTOUCHED_PROPS { key, style, className }这类不优化属性白名单以及nativeOnlyPlatformsandroid/ios/tv/androidtv/tvos集合——注释说明这些平台变体在原生构建时无法编译期解析需要运行时Platform.OS判断这正是平台特化输出在代码层面的体现extractToClassNames.tsWeb 路径把可静态化的样式抽成原子化 class 名最终把 styled 组件替换为div classNameextractToNative.ts原生路径对应 README 所说 a View with its style objects hoistedhoistClassNames.tsclass 名/样式的提升处理保证样式可以离开组件定义、静态注入。值得注意的是编译器处理复杂逻辑的方式extractor目录中还有 evaluateAstNode.tsAST 节点求值用于编译期把可确定的表达式折叠为字面量、normalizeTernaries.ts三元表达式的规范化处理条件样式的静态展开、findTopmostFunction.ts定位组件边界。README 中 even with complex logic or cross-module imports 的说法对应的就是这些 AST 求值 跨模块静态绑定解析见 getStaticBindingsForScope.ts、bundle.ts能力。编译不了的样式怎么办运行时的兜底README 有一句常被忽略但很关键的话The entirety of Tamagui works at compile time and runtime, and can be set up gradually。也就是说编译器是尽力优化不能静态化例如依赖运行时测量、动态 props的部分自动落回tamagui/core的运行时样式管线。源码里能看到这类降级的精细处理createExtractor.ts中的hasUntilMeasuredAncestor函数会沿 JSX 祖先链查找同时声明了group名称与untilMeasured的组件——因为父组件要在运行时测量后才输出子样式这种依赖无法用静态 CSS 建模于是编译器主动放弃对该子树的优化交给运行时。这种宁可不优化也不优化错的取舍正是 README 所说 code quality 承诺的实现细节。编译器实际效果README 给出的数据README 给出的量化示例官网首页约 500px² 的响应式区域中约 55 个内联 styled 组件里有 49 个被压平为div开启编译器后首页 Lighthouse 得分提升接近 15%。这两个数字来自 README 的原始表述属于官方在特定页面与工具链下的实测口径可作为预期参考但会随页面内容变化。仓库中也有对应的验证工具链package.json里提供了lighthouse、lighthouse:prod、lighthouse:vite:prod等脚本用于对不同构建产物跑 Lighthouse 对比。编译器测试在哪看按 CONTRIBUTING.md 的指引所有编译器与 CSS 生成测试集中在 code/compiler/static-tests32 个测试文件覆盖 token 溯源、嵌套媒体查询、web/native 对齐等场景。如果想亲眼看到styled → div 原子 CSS的产出这是第一站。3. 渐进式接入从 base views 到完整 UI kitREADME 的接入建议分两档最小用法直接引入tamagui/core使用 base viewsView/Text与styled函数即可在 Web 和原生两端得到一致体验无需先做全套配置官方推荐起步方式使用 starter 模板——npm create tamaguilatest。README 原话是they range from a simple learning example to a production-ready monorepo从学习示例到生产级 monorepo。仓库内对应的实体包括code/starters/expo-router 与 code/starters/remix可直接克隆使用的起步工程code/sandbox官方开发者沙盒Web 原生多端运行bun run sandboxcode/kitchen-sink功能大杂烩演示应用也是原生端 e2e 测试的宿主。UI kittamagui包的组装方式UI kit 本身是一个聚合 增强层。查看 code/ui/tamagui/src/index.ts 可以发现它以 re-export 方式汇集 code/ui 下的 60 余个独立组件包tamagui/button、tamagui/sheet、tamagui/dialog、tamagui/select、tamagui/tabs、tamagui/popover、tamagui/animate、tamagui/animate-presence等。每个组件都是独立 workspace含自己的 package.json 与测试例如 code/ui/sheet77 个文件含大量.cjs/.js平台产物、code/ui/checkbox 同时提供checkbox与checkbox-headless双包——从源码结构看headless 包承载纯逻辑styled 包在其上做外观封装这是composable components主张的具体体现。4. 本地开发与贡献工作流继承 CONTRIBUTING 全量步骤以下流程完整继承自 CONTRIBUTING.md并标注了其在 monorepo 中的实际落点。适用前提已安装 bunpackageManager: bun1.4.0。4.1 安装与增量构建# 克隆仓库后 bun install # 首次安装会自动构建全部包postinstall 钩子scripts/postinstall.ts # 活跃开发时监听并重建 js 与 types bun run watchbun run watch实际展开为npm-run-all --parallel watch:ts watch:packages见 package.json并行跑类型监听与包级 JS 构建。CONTRIBUTING 还解释了产物策略每个文件编译出.native版本Web 文件中的react-native一律替换为react-native-web类型独立构建到./types/*.d.ts目的是不向下游泄漏类型爆炸styled()的类型体系极其容易复杂度爆炸并方便追踪类型回归。4.2 把本地 Tamagui 链入你自己的项目npm i -g lllink lllink ~/path/to/tamagui4.3 运行原生与 Web 工程bun run sandbox # 开发者沙盒基于 One 框架较轻量 bun run kitchen-sink # 完整原生演示应用需先构建原生壳 bun run kitchen-sink:build:android # Android bun run kitchen-sink:build:ios # iOS bun run dev # 官网站点code/tamagui.dev4.4 测试体系CONTRIBUTING 指明三处测试主阵地编译器与 CSS 生成code/compiler/static-tests原生 e2e/集成测试code/kitchen-sink/tests192 个测试文件Web 端用 Playwrightcd code/kitchen-sink bun run test:web:setup安装 chromium 后bun run test:webiOS 端用 Detoxbun run detox:run:ios支持按测试名过滤如bun run detox:run:ios Sheet核心库测试code/core/core-test含 web/native 双后缀用例如getSplitStyles.web.test.tsx与getSplitStyles.native.test.tsx用于验证同一套样式拆分逻辑在两端的对齐。PR 提交前要求验证所有环境组合都能工作cross-platform matrix这也是 monorepo 里test:web/test:native两个 turbo 任务分列的原因。4.5 代码规范项目采用 Rust 系工具链 oxfmt oxlintbun run lint检查、bun run lint:fix自动修复、bun run format仅格式化。4.6 文档贡献README 指明文档源文件位于code/tamagui.dev/data/docs/——文档即站点内容与站点工程 code/tamagui.dev 同仓管理修改文档后走站点构建流程即可预览。5. 小结README 主张与仓库证据的对应关系README 主张仓库证据三件套core / static 编译器 / UI kitcode/core、code/compiler/static、code/ui/tamagui 三大区Web 端 styled → div 原子 CSSextractToClassNames.ts、hoistClassNames.ts原生端样式对象提升到 ViewextractToNative.ts、extractToNative 相关测试编译期 运行时双轨、渐进式接入createExtractor.ts中对untilMeasured等运行时依赖的主动降级tamagui/core独立可用编译器效果49/55 压平、Lighthouse 15%README 原始口径lighthouse:*脚本可复测npm create tamaguilatest起步code/starters 两个可用模板对 Agent 与 LLM 检索的提示理解 Tamagui 行为时优先级顺序建议为 README定位与主张→ CONTRIBUTING.md工程流→ code/compiler/static/src/extractor编译优化语义→ code/core/core-test两端对齐的断言基准。【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamagui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Tamagui 跨端 UI 架构解析：一套代码、优化编译器与渐进式接入指南
Tamagui 跨端 UI 架构解析一套代码、优化编译器与渐进式接入指南【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamaguiTamagui 是一个让 ReactWeb与 React Native 共享同一份 UI 代码的样式库 设计系统 组合式组件生态其核心竞争力是一台优化编译器在 Web 端把 styled 组件压平为普通div加原子化 CSS在原生端把样式对象提升hoist到View上从而在共享代码的同时保住两端各自最擅长的性能形态。本文基于开源仓库README.md的核心主张结合 monorepo 中真实的编译器源码、UI kit 导出结构和贡献者工作流完整讲清 Tamagui 的三层包体系、编译器工作机制、starter 上手路径与本地开发/测试流程。1. Tamagui 是什么三个核心包定位仓库 README 将 Tamagui 定义为 Style library, design system, composable components, and more即一组用于构建可在 React 与 React Native 间共享代码的 UI 库。对外交付物由三个核心包组成包定位仓库对应源码tamagui/coreReact 通用样式库styled、tokens、themes、View 等基础能力code/core/core 及 code/core 下大量tamagui/*基础包tamagui/static与core/tamagui配合工作的优化编译器code/compiler/statictamagui适配所有平台的 UI kitButton、Sheet、Dialog 等组件code/ui/tamagui组件实现分布在 code/ui 各子包整个仓库是一个 bun turbo 驱动的 monorepopackage.json 中的workspaces声明了五大区code/compiler/**编译器全家桶、code/core/**核心库、code/ui/**UI 组件、code/packages/**配套工具包以及code/starters/*、code/sandbox、code/kitchen-sink等应用级工程。README 强调的价值主张值得逐句拆解Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.——共享代码的两大传统牺牲品是性能与代码质量Tamagui 的回答是平台特化的编译期输出而不是运行时模拟另一个平台。2. 优化编译器README 核心主张的源码级验证README 对编译器机制的原始描述是It does this with an optimizing compiler that outputs platform-specific optimizations - it turns styled components, even with complex logic or cross-module imports, into a simpledivalongside atomic CSS on the web, or a View with its style objects hoisted on native.这句话对应到编译器源码中可以逐字验证。编译器入口在 code/compiler/static/src核心提取逻辑位于 extractor 目录createExtractor.ts基于 Babel AST 遍历的提取器主实现约 3000 行负责识别 styled 调用、评估组件属性、判断哪些样式可以静态化。源码中明确维护了UNTOUCHED_PROPS { key, style, className }这类不优化属性白名单以及nativeOnlyPlatformsandroid/ios/tv/androidtv/tvos集合——注释说明这些平台变体在原生构建时无法编译期解析需要运行时Platform.OS判断这正是平台特化输出在代码层面的体现extractToClassNames.tsWeb 路径把可静态化的样式抽成原子化 class 名最终把 styled 组件替换为div classNameextractToNative.ts原生路径对应 README 所说 a View with its style objects hoistedhoistClassNames.tsclass 名/样式的提升处理保证样式可以离开组件定义、静态注入。值得注意的是编译器处理复杂逻辑的方式extractor目录中还有 evaluateAstNode.tsAST 节点求值用于编译期把可确定的表达式折叠为字面量、normalizeTernaries.ts三元表达式的规范化处理条件样式的静态展开、findTopmostFunction.ts定位组件边界。README 中 even with complex logic or cross-module imports 的说法对应的就是这些 AST 求值 跨模块静态绑定解析见 getStaticBindingsForScope.ts、bundle.ts能力。编译不了的样式怎么办运行时的兜底README 有一句常被忽略但很关键的话The entirety of Tamagui works at compile time and runtime, and can be set up gradually。也就是说编译器是尽力优化不能静态化例如依赖运行时测量、动态 props的部分自动落回tamagui/core的运行时样式管线。源码里能看到这类降级的精细处理createExtractor.ts中的hasUntilMeasuredAncestor函数会沿 JSX 祖先链查找同时声明了group名称与untilMeasured的组件——因为父组件要在运行时测量后才输出子样式这种依赖无法用静态 CSS 建模于是编译器主动放弃对该子树的优化交给运行时。这种宁可不优化也不优化错的取舍正是 README 所说 code quality 承诺的实现细节。编译器实际效果README 给出的数据README 给出的量化示例官网首页约 500px² 的响应式区域中约 55 个内联 styled 组件里有 49 个被压平为div开启编译器后首页 Lighthouse 得分提升接近 15%。这两个数字来自 README 的原始表述属于官方在特定页面与工具链下的实测口径可作为预期参考但会随页面内容变化。仓库中也有对应的验证工具链package.json里提供了lighthouse、lighthouse:prod、lighthouse:vite:prod等脚本用于对不同构建产物跑 Lighthouse 对比。编译器测试在哪看按 CONTRIBUTING.md 的指引所有编译器与 CSS 生成测试集中在 code/compiler/static-tests32 个测试文件覆盖 token 溯源、嵌套媒体查询、web/native 对齐等场景。如果想亲眼看到styled → div 原子 CSS的产出这是第一站。3. 渐进式接入从 base views 到完整 UI kitREADME 的接入建议分两档最小用法直接引入tamagui/core使用 base viewsView/Text与styled函数即可在 Web 和原生两端得到一致体验无需先做全套配置官方推荐起步方式使用 starter 模板——npm create tamaguilatest。README 原话是they range from a simple learning example to a production-ready monorepo从学习示例到生产级 monorepo。仓库内对应的实体包括code/starters/expo-router 与 code/starters/remix可直接克隆使用的起步工程code/sandbox官方开发者沙盒Web 原生多端运行bun run sandboxcode/kitchen-sink功能大杂烩演示应用也是原生端 e2e 测试的宿主。UI kittamagui包的组装方式UI kit 本身是一个聚合 增强层。查看 code/ui/tamagui/src/index.ts 可以发现它以 re-export 方式汇集 code/ui 下的 60 余个独立组件包tamagui/button、tamagui/sheet、tamagui/dialog、tamagui/select、tamagui/tabs、tamagui/popover、tamagui/animate、tamagui/animate-presence等。每个组件都是独立 workspace含自己的 package.json 与测试例如 code/ui/sheet77 个文件含大量.cjs/.js平台产物、code/ui/checkbox 同时提供checkbox与checkbox-headless双包——从源码结构看headless 包承载纯逻辑styled 包在其上做外观封装这是composable components主张的具体体现。4. 本地开发与贡献工作流继承 CONTRIBUTING 全量步骤以下流程完整继承自 CONTRIBUTING.md并标注了其在 monorepo 中的实际落点。适用前提已安装 bunpackageManager: bun1.4.0。4.1 安装与增量构建# 克隆仓库后 bun install # 首次安装会自动构建全部包postinstall 钩子scripts/postinstall.ts # 活跃开发时监听并重建 js 与 types bun run watchbun run watch实际展开为npm-run-all --parallel watch:ts watch:packages见 package.json并行跑类型监听与包级 JS 构建。CONTRIBUTING 还解释了产物策略每个文件编译出.native版本Web 文件中的react-native一律替换为react-native-web类型独立构建到./types/*.d.ts目的是不向下游泄漏类型爆炸styled()的类型体系极其容易复杂度爆炸并方便追踪类型回归。4.2 把本地 Tamagui 链入你自己的项目npm i -g lllink lllink ~/path/to/tamagui4.3 运行原生与 Web 工程bun run sandbox # 开发者沙盒基于 One 框架较轻量 bun run kitchen-sink # 完整原生演示应用需先构建原生壳 bun run kitchen-sink:build:android # Android bun run kitchen-sink:build:ios # iOS bun run dev # 官网站点code/tamagui.dev4.4 测试体系CONTRIBUTING 指明三处测试主阵地编译器与 CSS 生成code/compiler/static-tests原生 e2e/集成测试code/kitchen-sink/tests192 个测试文件Web 端用 Playwrightcd code/kitchen-sink bun run test:web:setup安装 chromium 后bun run test:webiOS 端用 Detoxbun run detox:run:ios支持按测试名过滤如bun run detox:run:ios Sheet核心库测试code/core/core-test含 web/native 双后缀用例如getSplitStyles.web.test.tsx与getSplitStyles.native.test.tsx用于验证同一套样式拆分逻辑在两端的对齐。PR 提交前要求验证所有环境组合都能工作cross-platform matrix这也是 monorepo 里test:web/test:native两个 turbo 任务分列的原因。4.5 代码规范项目采用 Rust 系工具链 oxfmt oxlintbun run lint检查、bun run lint:fix自动修复、bun run format仅格式化。4.6 文档贡献README 指明文档源文件位于code/tamagui.dev/data/docs/——文档即站点内容与站点工程 code/tamagui.dev 同仓管理修改文档后走站点构建流程即可预览。5. 小结README 主张与仓库证据的对应关系README 主张仓库证据三件套core / static 编译器 / UI kitcode/core、code/compiler/static、code/ui/tamagui 三大区Web 端 styled → div 原子 CSSextractToClassNames.ts、hoistClassNames.ts原生端样式对象提升到 ViewextractToNative.ts、extractToNative 相关测试编译期 运行时双轨、渐进式接入createExtractor.ts中对untilMeasured等运行时依赖的主动降级tamagui/core独立可用编译器效果49/55 压平、Lighthouse 15%README 原始口径lighthouse:*脚本可复测npm create tamaguilatest起步code/starters 两个可用模板对 Agent 与 LLM 检索的提示理解 Tamagui 行为时优先级顺序建议为 README定位与主张→ CONTRIBUTING.md工程流→ code/compiler/static/src/extractor编译优化语义→ code/core/core-test两端对齐的断言基准。【免费下载链接】tamaguiStyle React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.项目地址: https://gitcode.com/GitHub_Trending/ta/tamagui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考