For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ru/docs/mobile/ui.md (or send Accept: text/markdown).

Нативный UI и темы

Экранные примитивы и общие view-модели, отражающие дизайн-решения веба.

Задать вопрос об этом руководстве

Прежде чем начать

Откройте загруженный проект supastack в Visual Studio Code, используя «Файл» → «Открыть папку», затем выберите «Терминал» → «Новый терминал». Корень репозитория — это папка, содержащая package.json, приложения и пакеты. Запустите команду ниже и оставьте терминал открытым. Если команда не распознается, завершите руководство по установке инструмента, прежде чем продолжить.

Сначала прочтите руководство по платформе. Сервер — это процесс приложения, который отвечает на запросы браузера или телефона. Веб читает apps/web/.env.local, Expo читает apps/mobile/.env.local, а команды миграции базы данных читают корневой .env. Демонстрация без базы данных / панели мониторинга отделена от реальных учетных записей / аутентификации, для которых необходимо перенести Postgres. Для оформления заказа только на телефоне или компьютере требуется отдельно работающий веб-сервер.

corepack pnpm --filter @supastack/mobile start

Настройка и конфигурация

Экранные примитивы находятся в apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — и стилизуются из apps/mobile/src/theme, поэтому визуальные решения для веба напрямую отображаются в нативном интерфейсе. В настройках оформления режим «Как в веб-приложении» (apps/mobile/src/theme/synced.ts через GET/PUT /api/mobile/appearance) применяет синхронизированный веб-пакет цветов авторизованного пользователя из локального кэша.

packages/ui-native несёт кроссплатформенные хелперы view-моделей: createEntitlementCard превращает серверное состояние права доступа в title, status, detail, метку действия и метку доступности карточки, поэтому web и mobile рендерят одно и то же решение о доступе.

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 }

Рабочий процесс внедрения

Собирайте экраны из общих примитивов до написания новых элементов; следуйте токенам и плотности модуля темы вместо захардкоженных размеров и цветов.

Держите продуктовые тексты вне примитивов — они рендерят метки, а не решения о текстах. Проводите метки доступности через кастомные строки так, как это делает createEntitlementCard.

Проверка и устранение неполадок

Проверяйте экран в светлой и тёмной теме, на максимальном размере текста, с метками скринридера и на маленьком устройстве. Компонент, который обрезает или клипает при 200% текста, не завершён.