Мобильная разработка на React Native в 2026 году — это не просто написание кода, а умение быстро генерировать качественные решения. Один из главных инструментов современного разработчика — промты (prompts) для нейросетей. Правильно составленный запрос может заменить часы гугления и проб и ошибок. В этой статье я собрал 15 проверенных промтов, которые помогут вам создавать компоненты, настраивать навигацию и интегрировать API. Все примеры — из реальной практики, с кодом и пояснениями.
Почему промты важны для React Native?
React Native — фреймворк с огромным комьюнити и документацией, но время разработки часто уходит на рутину: написание однотипных компонентов, настройка навигации, обработка ошибок API. Нейросети, такие как GPT-4, Claude или Gemini, отлично справляются с шаблонными задачами, если дать им правильный контекст. По данным исследования GitHub Copilot (2025), разработчики, использующие AI-ассистентов, экономят до 30% времени на написание кода. Промты — это ключ к этой экономии.
Категория 1: Базовые промты для компонентов
1.1 Создание функционального компонента с TypeScript
Задача: Сгенерировать компонент кнопки с поддержкой кастомных стилей и состояний.
Промт:
Напиши функциональный компонент Button на React Native с TypeScript. Компонент должен принимать props: title (string), onPress (function), variant ('primary'
| 'secondary' | 'outline'), disabled (boolean, optional). Используй StyleSheet.create для стилей. Добавь обработку состояния нажатия (TouchableOpacity). Включи пример использования.
Пример результата:
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary'
| 'secondary' | 'outline';
disabled?: boolean;
}
const Button: React.FC<ButtonProps> = ({ title, onPress, variant = 'primary', disabled = false }) => {
return (
<TouchableOpacity
style={[styles.button, styles[variant], disabled && styles.disabled]}
onPress={onPress}
disabled={disabled}
activeOpacity={0.7}
>
<Text style={[styles.text, variant === 'outline' && styles.outlineText]}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: { padding: 12, borderRadius: 8, alignItems: 'center' },
primary: { backgroundColor: '#007AFF' },
secondary: { backgroundColor: '#5856D6' },
outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#007AFF' },
disabled: { opacity: 0.5 },
text: { color: '#fff', fontSize: 16, fontWeight: '600' },
outlineText: { color: '#007AFF' },
});
export default Button;
1.2 Компонент списка с FlatList и pull-to-refresh
Задача: Создать компонент для отображения списка данных с обновлением по свайпу.
Промт:
Создай компонент DataList на React Native, который использует FlatList для отображения массива объектов с полями id, name, email. Добавь поддержку pull-to-refresh (RefreshControl) и состояние загрузки (ActivityIndicator). Используй TypeScript. Включи обработку пустого списка (EmptyComponent).
Пример результата:
import React, { useState } from 'react';
import { FlatList, RefreshControl, ActivityIndicator, Text, View, StyleSheet } from 'react-native';
interface Item {
id: string;
name: string;
email: string;
}
interface DataListProps {
data: Item[];
onRefresh: () => Promise<void>;
loading?: boolean;
}
const DataList: React.FC<DataListProps> = ({ data, onRefresh, loading = false }) => {
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = async () => {
setRefreshing(true);
await onRefresh();
setRefreshing(false);
};
const renderItem = ({ item }: { item: Item }) => (
<View style={styles.item}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.email}>{item.email}</Text>
</View>
);
if (loading && data.length === 0) {
return <ActivityIndicator size="large" color="#007AFF" />;
}
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
ListEmptyComponent={<Text style={styles.empty}>No data available</Text>}
/>
);
};
const styles = StyleSheet.create({
item: { padding: 16, borderBottomWidth: 1, borderColor: '#E5E5E5' },
name: { fontSize: 18, fontWeight: 'bold' },
email: { fontSize: 14, color: '#666' },
empty: { textAlign: 'center', marginTop: 50, fontSize: 16 },
});
export default DataList;
Категория 2: Продвинутые промты для навигации
2.1 Настройка React Navigation с TypeScript
Задача: Сгенерировать конфигурацию навигатора с типами.
Промт:
Напиши конфигурацию для React Navigation (версия 6+) в React Native с TypeScript. Создай StackNavigator с двумя экранами: HomeScreen и DetailsScreen. Определи типы параметров для навигации (NativeStackScreenProps). Используя createNativeStackNavigator. Включи пример перехода с параметрами.
Пример результата:
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
Details: { itemId: number; itemName: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
type DetailsProps = NativeStackScreenProps<RootStackParamList, 'Details'>;
const HomeScreen: React.FC<HomeProps> = ({ navigation }) => {
const goToDetails = () => {
navigation.navigate('Details', { itemId: 42, itemName: 'Test Item' });
};
return <Button title="Go to Details" onPress={goToDetails} />;
};
const DetailsScreen: React.FC<DetailsProps> = ({ route }) => {
const { itemId, itemName } = route.params;
return <Text>{itemName} (ID: {itemId})</Text>;
};
export default function AppNavigator() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}
2.2 TabNavigator с кастомными иконками
Задача: Создать нижнюю навигацию с иконками из библиотеки.
Промт:
Создай BottomTabNavigator с тремя вкладками: Home, Search, Profile. Используй @react-navigation/bottom-tabs и react-native-vector-icons (иконки Ionicons). Кастомные стили для активной и неактивной вкладки. TypeScript.
Пример результата:
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
const TabNavigator = () => (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName: string;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home-outline';
} else if (route.name === 'Search') {
iconName = focused ? 'search' : 'search-outline';
} else if (route.name === 'Profile') {
iconName = focused ? 'person' : 'person-outline';
} else {
iconName = 'ellipse';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#007AFF',
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
Категория 3: Экспертные промты для работы с API
3.1 Хук для запросов с кешированием и повторными попытками
Задача: Написать кастомный хук для работы с REST API.
Промт:
Напиши кастомный хук useApi на React Native с TypeScript. Хук должен: принимать URL и опции (method, headers, body), возвращать {data, loading, error, refetch}. Добавь кеширование в AsyncStorage на 5 минут и автоматическую повторную попытку при ошибке (до 3 раз с задержкой 2 секунды). Используй fetch.
Пример результата:
import { useState, useEffect, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
interface ApiOptions {
method?: 'GET'
| 'POST' | 'PUT' | 'DELETE';
headers?: Record<string, string>;
body?: any;
}
interface UseApiResult<T> {
data: T | null;
loading: boolean;
error: string | null;
refetch: () => void;
}
const CACHE_DURATION = 5 * 60 * 1000; // 5 минут
const MAX_RETRIES = 3;
const RETRY_DELAY = 2000;
async function fetchWithRetry(url: string, options: ApiOptions, retries = MAX_RETRIES): Promise<Response> {
try {
const response = await fetch(url, {
method: options.method || 'GET',
headers: { 'Content-Type': 'application/json', ...options.headers },
body: options.body ? JSON.stringify(options.body) : undefined,
});
if (!response.ok) throw new Error(`HTTP error ${response.status}`);
return response;
} catch (error) {
if (retries > 0) {
await new Promise(resolve => setTimeout(resolve, RETRY_DELAY));
return fetchWithRetry(url, options, retries - 1);
}
throw error;
}
}
export function useApi<T = any>(url: string, options: ApiOptions = {}): UseApiResult<T> {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchData = useCallback(async () => {
setLoading(true);
setError(null);
try {
// Check cache
const cached = await AsyncStorage.getItem(url);
if (cached) {
const parsed = JSON.parse(cached);
if (Date.now() - parsed.timestamp < CACHE_DURATION) {
setData(parsed.data);
setLoading(false);
return;
}
}
const response = await fetchWithRetry(url, options);
const result = await response.json();
// Save to cache
await AsyncStorage.setItem(url, JSON.stringify({ data: result, timestamp: Date.now() }));
setData(result);
} catch (err: any) {
setError(err.message || 'Unknown error');
} finally {
setLoading(false);
}
}, [url]);
useEffect(() => {
fetchData();
}, [fetchData]);
return { data, loading, error, refetch: fetchData };
}
3.2 Интеграция с REST API: пример с погодным сервисом
Задача: Показать реальный пример использования хука.
Промт:
Напиши компонент WeatherWidget, который использует хук useApi для получения данных о погоде с OpenWeatherMap (или любого другого бесплатного API). Отобрази температуру, описание и иконку. Обработай состояния загрузки и ошибки.
Пример результата:
import React from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { useApi } from './useApi';
interface WeatherData {
main: { temp: number };
weather: { description: string; icon: string }[];
}
const WeatherWidget: React.FC<{ city: string }> = ({ city }) => {
const apiKey = 'YOUR_API_KEY'; // Замените на реальный ключ
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
const { data, loading, error, refetch } = useApi<WeatherData>(url);
if (loading) return <ActivityIndicator size="large" />;
if (error) return <Text>Error: {error}</Text>;
if (!data) return null;
return (
<View style={styles.container}>
<Text style={styles.temp}>{data.main.temp}°C</Text>
<Text style={styles.desc}>{data.weather[0].description}</Text>
<Text onPress={refetch} style={styles.refresh}>Refresh</Text>
</View>
);
};
const styles = StyleSheet.create({
container: { padding: 20, alignItems: 'center' },
temp: { fontSize: 48, fontWeight: 'bold' },
desc: { fontSize: 18, textTransform: 'capitalize', marginTop: 8 },
refresh: { color: '#007AFF', marginTop: 16 },
});
Советы по оптимизации промтов
| Совет | Описание |
|---|---|
| Контекст | Указывай версию библиотеки (например, React Navigation 6+) |
| Типизация | Всегда проси TypeScript — код будет чище |
| Примеры | Добавляй фразу «включи пример использования» |
| Ошибки | Проси обработку краевых случаев (пустой список, ошибка сети) |
Заключение
Промты — это не магия, а инструмент. Чем точнее вы формулируете задачу, тем качественнее результат. Используйте приведённые шаблоны как основу, адаптируя их под свои проекты. React Native в 2026 году — это зрелая экосистема, и AI-ассистенты помогают ускорить разработку, но фундаментальные знания всё ещё важны. Экспериментируйте, тестируйте и не бойтесь переписывать сгенерированный код — нейросеть даёт старт, а финальное качество определяете вы.
Комментарии