> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 原生 UI 与主题

镜像 Web 设计决策的屏幕原语与共享 view-model。

## 开始之前

使用“文件”→“打开文件夹”在 Visual Studio Code 中打开下载的 supastack 项目，然后选择“终端”→“新建终端”。存储库根目录是包含 package.json、apps 和 packages 的文件夹。运行下面的命令并保持终端打开。如果无法识别命令，请先完成工具安装指南，然后再继续。

首先阅读平台教程。服务器是响应浏览器或电话请求的应用程序进程。 Web 读取 apps/web/.env.local，Expo 读取 apps/mobile/.env.local，数据库迁移命令读取 root .env。无数据库/仪表板演示与真实/身份验证帐户分开，需要迁移Postgres。仅电话或桌面结帐需要单独运行的 Web 后端。

[安装工具并获取代码](https://supastack.dev/zh/docs/web/before-you-start.md)

[学习命令、文件和配置](https://supastack.dev/zh/docs/web/terminal-basics.md)

[完成手机首次运行教程](https://supastack.dev/zh/docs/mobile/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/mobile start
```


## 安装与配置

屏幕基础组件位于 apps/mobile/src/ui —— Screen、Card、Title、Detail、SectionLabel、ErrorText、AppButton —— 由 apps/mobile/src/theme 提供样式，使网页端的视觉决策直接映射到原生界面。在外观设置中，“跟随网页端”模式（通过 GET/PUT /api/mobile/appearance 调用的 apps/mobile/src/theme/synced.ts）会从本地缓存应用已登录用户同步的网页端配色包。

packages/ui-native 承载跨平台的 view-model 助手：createEntitlementCard 把服务端权限状态转成卡片的 title、status、detail、动作标签与无障碍标签，让 Web 与移动端渲染同一个访问决策。

```
apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }
```


## 实现流程

先用共享原语组装屏幕，再写新元素；对齐 theme 模块的令牌与密度，而不是硬编码尺寸和颜色。

产品文案不要进入原语 —— 它们渲染标签，不做文案决策。像 createEntitlementCard 那样，在自定义行中透传无障碍标签。


## 验证与排障

在浅色与深色、最大文字尺寸、读屏标签与小屏设备下验证界面。在 200% 文字下截断或裁切的组件不算完成。


## 下一篇

[移动端权益](https://supastack.dev/zh/docs/mobile/entitlements.md)