React Native — это мощный фреймворк, но даже опытные разработчики тратят часы на рутинные задачи: настройку навигации, обработку push-уведомлений, отладку. А что если большую часть этой работы можно делегировать нейросети? В этой статье — 15 готовых промтов, которые реально экономят время. Каждый промт проверен на практике, содержит примеры и может быть адаптирован под ваш проект. Вы просто копируете, вставляете и получаете рабочий код.
Важно: промты — это не замена вашим знаниям, а ускоритель. Всегда проверяйте сгенерированный код и адаптируйте его под свой стек.
Промт 1: Базовая навигация с React Navigation
Задача: настроить стековую навигацию с нижними табами за пару минут.
Промт:
Создай навигацию для React Native приложения с использованием React Navigation (версия 6). У меня есть три экрана: HomeScreen, ProfileScreen, SettingsScreen. Настрой навигатор с нижними табами (createBottomTabNavigator) и стековым навигатором для каждого таба. Покажи полный код с импортами, настройкой NavigationContainer и Tab.Navigator. Добавь иконки для табов (используй @expo/vector-icons или react-native-vector-icons). Учти, что проект использует TypeScript.
Пример использования: вы разработчик, который только начал проект и хочет быстро получить каркас навигации. Вставляете промт в ChatGPT или Claude, получаете код, который можно сразу вставить в App.tsx и файлы экранов.
Промт 2: Типизированные пропсы и стейт с TypeScript
Задача: избежать ошибок типизации при работе с props и state.
Промт:
Напиши компонент React Native (функциональный) на TypeScript для отображения списка товаров. У компонента должны быть пропсы: items (массив объектов с полями id, name, price) и onItemPress (функция, принимающая id). Используй interface для описания пропсов. Покажи пример использования компонента с моковыми данными. Добавь типизацию useState для хранения выбранного товара.
Пример использования: вы часто путаетесь в типах при передаче данных между компонентами. Этот промт генерирует готовый компонент с правильной типизацией, что снижает количество ошибок на этапе компиляции.
Промт 3: Работа с API и загрузка данных
Задача: написать хук для получения данных с сервера с обработкой состояний загрузки и ошибок.
Промт:
Создай кастомный хук useFetch для React Native, который принимает URL и возвращает данные, статус загрузки и ошибку. Используй fetch API. Добавь поддержку отмены запроса (AbortController) и обработку ошибок. Покажи пример использования в компоненте: вывод спиннера, данных или сообщения об ошибке. Учти TypeScript.
Пример использования: вы пишете экран с лентой новостей, где нужно загружать данные с API. Хук useFetch может быть переиспользован в разных местах приложения.
Промт 4: Обработка push-уведомлений (Firebase Cloud Messaging)
Задача: настроить получение push-уведомлений в React Native приложении.
Промт:
Напиши код для интеграции push-уведомлений в React Native с помощью Firebase Cloud Messaging (FCM) и @react-native-firebase/messaging. Покажи, как запросить разрешение на уведомления, получить токен устройства, подписаться на тему и обрабатывать входящие уведомления в фоновом и foreground режиме. Добавь обработку нажатия на уведомление и переход на нужный экран. Опиши шаги по настройке Firebase проекта.
Пример использования: вам нужно добавить уведомления о новых заказах в интернет-магазин. Промт даёт полный код и инструкцию по настройке.
Промт 5: Управление состоянием с Redux Toolkit
Задача: настроить глобальный стейт для авторизации пользователя.
Промт:
Создай Redux Toolkit slice для авторизации пользователя в React Native приложении. Стейт: isAuthenticated, user (объект с полями id, name, email), token. Экшены: login (принимает данные пользователя и токен), logout. Также создай селекторы для получения состояния авторизации. Покажи, как настроить store и Provider в корневом компоненте. Используй TypeScript.
Пример использования: вы хотите хранить данные о пользователе и токен в глобальном состоянии, чтобы иметь доступ к ним из любого экрана.
Промт 6: Стилизация и темизация (Styled Components)
Задача: создать переиспользуемые стилизованные компоненты с поддержкой темы.
Промт:
Настрой темизацию в React Native с использованием styled-components. Создай файл theme.ts, где будет определена структура темы (цвета, шрифты, отступы). Используй ThemeProvider для передачи темы в приложение. Создай несколько переиспользуемых компонентов (Button, Input, Card) с использованием styled-components. Покажи, как переключаться между светлой и темной темой через контекст.
Пример использования: вы хотите, чтобы приложение поддерживало тёмную тему. Промт помогает настроить темизацию и создать компоненты, которые автоматически адаптируются.
Промт 7: Анимации с Animated API
Задача: добавить плавную анимацию появления элемента.
Промт:
Напиши код для анимации появления (fade-in) и исчезновения (fade-out) компонента в React Native с использованием Animated API. Покажи, как использовать Animated.Value, Animated.timing, и Animated.View. Добавь управление анимацией через кнопку. Учти, что компонент должен быть переиспользуемым. Используй функциональный компонент и хуки.
Пример использования: вы хотите анимировать появление модального окна или карточки товара.
Промт 8: Работа с камерой и изображениями (react-native-image-picker)
Задача: реализовать выбор фото из галереи и съемку на камеру.
Промт:
Напиши код для выбора изображения из галереи или съемки на камеру в React Native с использованием react-native-image-picker. Покажи, как запросить разрешения на Android и iOS, как открыть галерею и камеру, как получить URI выбранного изображения и отобразить его в компоненте Image. Добавь обработку ошибок и отмены выбора. Опиши настройку нативных проектов.
Пример использования: в приложении для профиля пользователя нужно дать возможность загрузить аватар.
Промт 9: Работа с AsyncStorage для локального хранения
Задача: сохранить настройки пользователя локально.
Промт:
Напиши код для работы с AsyncStorage в React Native: сохранение, чтение и удаление данных. Покажи, как сохранить объект (например, настройки пользователя), преобразовав его в JSON, и как прочитать и распарсить обратно. Создай обертку в виде кастомного хука useAsyncStorage, который упрощает работу. Добавь обработку ошибок и пример использования.
Пример использования: вы хотите запомнить язык интерфейса или выбранную тему, чтобы при следующем запуске приложения они применились.
Промт 10: Отправка запросов с авторизацией (JWT)
Задача: добавить токен авторизации к запросам.
Промт:
Напиши функцию для отправки HTTP запросов с авторизацией по JWT токену. Используй fetch API. Функция должна принимать метод, URL, тело запроса и автоматически добавлять заголовок Authorization: Bearer <token>. Токен должен храниться в AsyncStorage и передаваться в функцию. Добавь обработку ошибок, включая 401 статус (перевыпуск токена или выход из системы). Покажи пример использования для GET и POST запросов.
Пример использования: ваше приложение общается с защищенным API, и каждый запрос требует токен.
Промт 11: Обработка глубоких ссылок (Deep Linking)
Задача: настроить переход по ссылкам в приложении.
Промт:
Настрой deep linking в React Native приложении с React Navigation. Покажи, как определить схему (например, myapp://) и маршруты для экранов. Добавь обработку ссылок в навигаторе: префиксы, конфигурацию экранов. Покажи, как обрабатывать ссылки, когда приложение закрыто (через Linking.getInitialURL) и когда оно уже открыто (через Linking.addEventListener). Приведи пример ссылки, которая открывает конкретный экран с параметрами.
Пример использования: вы хотите, чтобы пользователи могли переходить по ссылкам из email или соцсетей прямо в нужный раздел приложения.
Промт 12: Создание экрана с бесконечной прокруткой (FlatList)
Задача: реализовать список с подгрузкой данных при прокрутке.
Промт:
Создай компонент для бесконечной прокрутки списка в React Native с использованием FlatList. Данные загружаются с сервера постранично. Покажи, как использовать onEndReached для подгрузки следующей страницы, как отображать индикатор загрузки внизу списка, и как предотвратить повторные запросы. Добавь состояние загрузки, ошибок и пустого списка. Используй TypeScript.
Пример использования: вы делаете ленту новостей или каталог товаров, где нужно подгружать новые элементы при прокрутке.
Промт 13: Обработка ошибок и логирование
Задача: создать глобальный обработчик ошибок.
Промт:
Напиши код для глобальной обработки ошибок в React Native приложении. Используй ErrorBoundary (классовый компонент) для перехвата ошибок рендеринга. Добавь обработку ошибок в промисах (unhandledrejection) и сетевых запросов. Покажи, как логировать ошибки в консоль и отправлять на сервер (например, через fetch). Создай простую систему логирования с уровнями (info, warn, error).
Пример использования: вы хотите быстро находить ошибки в приложении и получать информацию о них для отладки.
Промт 14: Оптимизация производительности (useMemo, React.memo)
Задача: уменьшить количество лишних рендеров.
Промт:
Покажи примеры оптимизации производительности в React Native: использование React.memo для мемоизации компонентов, useMemo для вычислений, useCallback для функций. Приведи примеры, когда эти методы полезны (например, передача функций в дочерние компоненты, сложные вычисления). Объясни, как избежать лишних рендеров при изменении пропсов. Приведи код до и после оптимизации.
Пример использования: ваше приложение тормозит при обновлении большого списка, и вы хотите оптимизировать рендер.
Промт 15: Настройка среды для тестирования (Jest, React Native Testing Library)
Задача: написать тесты для ключевых компонентов.
Промт:
Настрой тестирование в React Native проекте с Jest и React Native Testing Library. Создай конфигурацию для Jest (если она отсутствует) и напиши пример теста для компонента Button: проверка рендеринга, нажатия и пропсов. Покажи, как мокать зависимости (например, навигацию или AsyncStorage). Добавь тест для кастомного хука useFetch, мокируя fetch.
Пример использования: вы хотите добавить базовые тесты, чтобы избежать регрессий при изменениях.
Итоги
Эти 15 промтов покрывают основные задачи, с которыми сталкивается каждый разработчик React Native. Они не только экономят время, но и помогают изучить лучшие практики — от типизации до оптимизации. Главное — не копируйте код слепо, а понимайте, что он делает, и адаптируйте под свой проект.
Начните с промтов, которые решают вашу самую актуальную проблему прямо сейчас, а затем постепенно внедряйте остальные. Если вы хотите углубиться в тему, загляните в официальную документацию React Native и React Navigation — там много примеров и объяснений.
Какие промты оказались для вас самыми полезными? Поделитесь в комментариях!
Комментарии