Редактор кода
AppX генерирует настоящий, доступный для изучения код Expo + React Native — не заблокированный экспорт из визуального конструктора. Встроенный редактор позволяет читать, править и создавать любой файл прямо в браузере, с тем же опытом редактирования, который лежит в основе VS Code.
Чтение кода и просмотр файлов всегда бесплатны — вы тратите кредиты только тогда, когда ИИ меняет код за вас.
Открытие редактора
Нажмите вкладку Code в правой панели. Вы увидите:
- Дерево файлов со всеми файлами вашего проекта.
- Редактор, показывающий любой файл, который вы выберете.
- Действия с файлами (переименовать, удалить, новый файл) через правый клик в дереве.
Как устроен проект
Приложения AppX строятся как проекты Expo Router, поэтому навигация исходит из структуры файлов. Типичная компоновка:
app/
(tabs)/
_layout.tsx ← Tab navigation
index.tsx ← First tab (usually Home)
explore.tsx ← Second tab
_layout.tsx ← Root layout (fonts, theme, navigation)
modal.tsx ← A modal screen, if any
components/
ui/ ← Reusable building blocks (Button, Card, Input)
constants/
colors.ts ← Color palette
typography.ts ← Font sizes and weights
hooks/ ← Shared logic
assets/ ← Fonts and images
Точная форма зависит от того, что AppX построил для вашего приложения.
Редактирование файлов
Откройте любой файл, внесите изменение и сохраните с помощью Cmd+S (Mac) или Ctrl+S (Windows/Linux). Предпросмотр подхватит ваше изменение сразу.
Безопасно править свободно
- Логика компонентов и JSX
- Значения стилей — цвета, размеры, отступы
- Текст и тексты интерфейса
- Бизнес-логика в хуках и утилитах
Править с небольшой осторожностью
- Пути импортов — их изменение может сломать сборку бандла.
- Имена компонентов — переименуйте в одном месте, обновите каждое место импорта.
- Имена файлов экранов — Expo Router строит маршруты из имён файлов, поэтому переименование файла меняет его навигационный маршрут.
Возможности редактора
- Подсветка синтаксиса для TypeScript, JSX, JSON и других
- Автодополнение для API React Native, пропсов и символов вашего проекта
- Подчёркивание ошибок прямо в коде для синтаксических ошибок
- Поиск и замена —
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 и отредактируйте значение. Сохраните — и предпросмотр обновится.
Добавление файлов
- Кликните правой кнопкой по папке в дереве.
- Выберите New File.
- Назовите его (например,
components/Avatar.tsx).
Новые файлы внутри app/ автоматически регистрируются как маршруты в Expo Router.
Редактор и чат вместе
Вам не нужно выбирать что-то одно. Распространённый ритм:
- Чат для крупных ходов — «Добавь экран настроек с переключателями уведомлений».
- Редактор для точных правок — увеличить радиус скругления, исправить цвет.
- Чат снова, когда нужна помощь ИИ — «Эта вёрстка ломается на маленьких экранах, исправь это».
Поскольку ИИ всегда читает ваши актуальные файлы, всё, что вы измените руками, будет учтено в следующем чате.
Отмена
Редактор поддерживает стандартную отмену/повтор в рамках сессии (Cmd+Z / Cmd+Shift+Z). Чтобы откатить правку ИИ, используйте вместо этого процесс подтверждения: отклоните правку до её применения или опишите откат в чате. Смотрите Редактирование через чат.
Экспорт вашего кода
Ваш код принадлежит вам. На платных тарифах вы можете экспортировать весь проект как ZIP из Project Settings → Export, затем запустить его локально с помощью npx expo start. Вы также можете держать репозиторий GitHub в двусторонней синхронизации — смотрите Интеграция с GitHub.