React Native — это не просто фреймворк, а целая экосистема, которая за последние годы кардинально изменилась. Помните времена, когда для простой анимации приходилось писать сотни строк кода на Java или Objective-C? Сегодня нейросети способны генерировать целые экраны, оптимизировать производительность и даже проектировать архитектуру приложения. Но только если вы умеете правильно формулировать задачи. Плохой промпт — это как невнятное ТЗ для джуниора: результат будет, но не тот, что нужен. В этой статье я собрал 10 проверенных промптов, которые помогут вам выжать максимум из AI-ассистентов в разработке на React Native. Никакой воды — только практика.
Промпт 1: Генерация UI-компонента с учётом дизайн-системы
Когда использовать: Когда нужно быстро создать переиспользуемый компонент, не отходя от вашего фирменного стиля.
Создай компонент Button на React Native (TypeScript), который соответствует дизайн-системе Material Design 3. Компонент должен поддерживать три состояния: default, disabled, loading. Используй только нативные компоненты (Pressable, ActivityIndicator). Стили должны быть адаптивными к тёмной теме (useColorScheme). Включи комментарии JSDoc для каждого пропса.
Пример использования: Вы работаете над приложением для банка. Вставляете промпт в ChatGPT или Claude, получаете готовый файл Button.tsx с типизацией и стилями. Остаётся только подключить его.
Промпт 2: Написание хуков для работы с данными
Когда использовать: Когда нужно инкапсулировать логику запросов к API, кэширование и обновление данных.
Напиши хук useFetch для React Native (TypeScript), который принимает URL и параметры запроса, возвращает состояние (loading, error, data) и функцию refetch. Используй AbortController для отмены запроса при размонтировании компонента. Обработай ошибки сети (NetworkError) и таймауты (AbortError). Добавь поддержку кэширования на 60 секунд.
Пример использования: В приложении для доставки еды вам нужно получать список ресторанов. Хук useFetch можно использовать в нескольких экранах, не дублируя логику.
Промпт 3: Оптимизация производительности FlatList
Когда использовать: Когда список из 1000+ элементов начинает лагать на слабых устройствах.
Проведи аудит производительности FlatList в React Native (TypeScript). Найди проблемы: отсутствие keyExtractor, использование анонимных функций в renderItem, неоптимальный размер изображений. Предложи конкретные исправления, включая использование React.memo, useCallback, getItemLayout и windowSize. Покажи пример кода до и после оптимизации.
Пример использования: Вы замечаете, что скролл ленты новостей тормозит на Android. AI-ассистент найдёт типичные ошибки и предложит готовые решения.
Промпт 4: Миграция с JavaScript на TypeScript
Когда использовать: Когда проект разросся, и вы решили добавить типизацию.
Составь пошаговый план миграции React Native проекта с JavaScript на TypeScript. Учти: настройка tsconfig.json, добавление типов для сторонних библиотек (например, @types/react-native), постепенная типизация компонентов. Приведи пример, как типизировать пропсы с помощью interface и type. Опиши типичные ошибки при миграции и способы их избежать.
Пример использования: Вы решили перевести старый проект на TypeScript. Промпт даст вам четкий план действий, а не просто общие рекомендации.
Промпт 5: Настройка навигации с React Navigation
Когда использовать: Когда нужно быстро настроить стековую, таб- или drawer-навигацию.
Создай навигационную структуру для приложения на React Native с React Navigation v6. Приложение имеет экраны: Login, Home, Profile, Settings. Используй native-stack для основных экранов и bottom-tabs для Home и Profile. Покажи, как передавать параметры между экранами и как настроить заголовки. TypeScript строго.
Пример использования: Вы начинаете новый проект и хотите сразу заложить правильную архитектуру навигации. Промпт сгенерирует код, который вы сможете использовать как основу.
Промпт 6: Работа с анимациями
Когда использовать: Когда нужны плавные анимации без потери производительности.
Создай анимацию появления модального окна на React Native с использованием Animated API. Окно должно выезжать снизу, иметь эффект затемнения фона и плавное затухание. Используй useNativeDriver: true, где это возможно. Добавь поддержку жеста свайпа вниз для закрытия окна.
Пример использования: В приложении для онлайн-курсов нужно красиво показывать детали урока. Анимация сделает интерфейс более отзывчивым.
Промпт 7: Обработка ошибок и логирование
Когда использовать: Когда нужно поймать все ошибки и отправить их в аналитику.
Напиши ErrorBoundary для React Native (TypeScript), который ловит ошибки рендеринга, показывает fallback UI и отправляет ошибку в Sentry. Добавь обработку ошибок в хуке useFetch: если статус ответа >= 400, выбрасывай ошибку с сообщением от сервера. Покажи, как логировать информацию в консоль в режиме разработки.
Пример использования: Вы хотите, чтобы приложение не падало при ошибках, а показывало пользователю понятное сообщение и отправляло ошибку вам на почту.
Промпт 8: Интеграция с REST API
Когда использовать: Когда нужно быстро подключить бэкенд.
Создай сервис для работы с REST API в React Native (TypeScript) с использованием axios. Определи типы для запросов и ответов (например, User, Product). Реализуй перехватчики для добавления токена авторизации и обработки ошибок 401. Покажи пример использования сервиса в компоненте с помощью useEffect.
Пример использования: Вы разрабатываете приложение для интернет-магазина. Сервис позволит централизованно управлять запросами и легко менять API.
Промпт 9: Написание тестов
Когда использовать: Когда нужно покрыть приложение тестами, но нет времени писать их вручную.
Напиши unit-тесты для компонента Button из предыдущего задания, используя Jest и React Native Testing Library. Покрой сценарии: рендер с разными пропсами, вызов onPress, состояние loading, когда кнопка неактивна. Также напиши тест для хука useFetch, мокая axios.
Пример использования: Вы хотите убедиться, что ваши компоненты работают корректно. Тесты, сгенерированные ИИ, сэкономят часы ручной работы.
Промпт 10: Генерация документации
Когда использовать: Когда код написан, а документация — нет.
Создай техническую документацию для компонента Button и хука useFetch на русском языке. Опиши пропсы, возвращаемые значения, примеры использования. Формат: Markdown. Добавь раздел "Как запустить тесты" и "Известные проблемы".
Пример использования: Вы сдаёте проект заказчику и хотите, чтобы документация была понятной даже новичку.
Реальные кейсы из практики
Многие компании уже используют промпты в повседневной разработке. Например, команда крупного банка сократила время на создание UI-компонентов на 40% благодаря генерации кода через нейросети. Другой стартап в сфере финтеха автоматизировал написание тестов, что позволило им релизить новые фичи каждую неделю без страха что-то сломать.
Промпты — это инструмент, а не замена разработчику
Помните: нейросети не понимают контекст вашего проекта, бизнес-логику и специфику. Они генерируют код, который нужно адаптировать под ваши нужды. Всегда проверяйте сгенерированный код, особенно если речь идёт о безопасности или работе с деньгами.
Как получить максимум от промптов
- Будьте конкретны. Чем больше деталей вы укажете, тем точнее будет результат.
- Указывайте версии библиотек. React Native и его экосистема быстро развиваются, и код для версии 0.70 может не работать в 0.74.
- Используйте итеративный подход. Не ждите идеального ответа с первого раза. Уточняйте, задавайте вопросы, просите изменить код.
- Пробуйте разные модели. Один и тот же промпт может дать разные результаты в ChatGPT, Claude или Gemini. Выбирайте то, что лучше подходит для вашей задачи.
Что дальше?
Освоив эти промпты, вы сможете в разы ускорить свою разработку на React Native. Начните с простых задач — генерация компонентов, написание хуков. Затем переходите к более сложным — оптимизация, тесты, документация. И помните: лучшие промпты — это те, которые вы адаптировали под свой стиль и задачи. Не бойтесь экспериментировать и делиться находками в комментариях!
Комментарии