Перейти к основному содержимому

Редактор кода

AppX генерирует настоящий, доступный для изучения код Expo + React Native — не заблокированный экспорт из визуального конструктора. Встроенный редактор позволяет читать и править любой файл прямо в браузере.

Как открыть редактор​

Откройте Код в боковой панели проекта. Вы увидите:

  • Дерево файлов со всеми файлами проекта.
  • Редактор, в котором открыт выбранный файл.

Чтобы добавить, переименовать или удалить файл, попросите об этом в чате.

Как устроен проект​

Приложения AppX — это проекты Expo Router, поэтому навигация строится из структуры файлов. Типичная структура:

app/
  (tabs)/
    _layout.tsx       ← Навигация по вкладкам
    index.tsx         ← Первая вкладка (обычно Home)
  _layout.tsx         ← Корневой layout
  +not-found.tsx      ← Показывается для неизвестного маршрута
components/           ← Переиспользуемые компоненты
constants/
  colors.ts           ← Цветовая палитра
  theme.ts            ← Шрифты, отступы, скругления, тени
hooks/                ← Общая логика

Точная структура зависит от того, что AppX построил для вашего приложения.

Редактирование файлов​

Откройте любой файл, внесите изменение и сохраните с помощью Cmd+S (Mac) или Ctrl+S (Windows/Linux).

Можно править свободно​

  • Логику компонентов и JSX
  • Значения стилей — цвета, размеры, отступы
  • Тексты
  • Бизнес-логику в хуках и утилитах

Правьте аккуратно​

  • Пути импортов — их изменение может сломать сборку.
  • Имена компонентов — переименовали в одном месте, обновите все импорты.
  • Имена файлов экранов — Expo Router строит маршруты из имён файлов, поэтому переименование файла меняет его маршрут.

Возможности редактора​

  • Подсветка синтаксиса для TypeScript, JSX, JSON и других форматов
  • Автодополнение при вводе
  • Подчёркивание синтаксических ошибок прямо в строке
  • Поиск и замена — Cmd+F / Ctrl+F
  • Несколько курсоров (Alt+клик) и сворачивание кода

Стили​

AppX оформляет каждый компонент через StyleSheet.create и использует lucide-react-native для иконок. Типичный блок стилей:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#111827',
  },
});

Чтобы изменить цвет или размер, найдите StyleSheet и поправьте значение.

Редактор и чат вместе​

Выбирать что-то одно не нужно. Обычный ритм:

  1. Чат для крупных шагов — «Добавь экран настроек с переключателем тёмной темы».
  2. Редактор для точных правок — поменять скругление, поправить цвет.
  3. Снова чат, когда нужна помощь ИИ — «Эта вёрстка ломается на маленьких экранах, исправь».

Отмена​

Редактор поддерживает обычные отмену и повтор в пределах сессии (Cmd+Z / Cmd+Shift+Z). Чтобы вернуться назад после правки ИИ, нажмите Undo на карточке хода или откройте меню проекта → История версий → Restore. См. Редактирование через чат.

Экспорт вашего кода​

Ваш код принадлежит вам. В каждом тарифе можно скачать весь проект в ZIP — нажмите Скачать код в верхней панели, затем Скачать код (ZIP) — и запустить его локально с помощью npx expo start. Чтобы хранить его в системе контроля версий, читайте Как выложить код AppX на GitHub.

Связанные страницы​

Редактирование через чат

Пусть изменение внесёт ИИ.

Код на GitHub

Скачайте ZIP и отправьте его в свой репозиторий.