Кросс-платформенная разработка на автопилоте: 14 промтов для React Native и Flutter в 2026 году

В 2026 году мобильная разработка перестала быть просто написанием кода — это оркестрация AI-ассистентов. React Native и Flutter остаются доминирующими фреймворками, но их эффективность теперь напрямую зависит от того, насколько точно вы формулируете задачи для нейросетей. Я собрал 14 проверенных промтов, которые экономят часы работы: от генерации компонентов до оптимизации производительности. Каждый промт сопровождается реальным примером и пояснением, как он интегрируется в ваш пайплайн.

Базовые промты: ускоряем рутину

1. Генерация UI-компонента с пропсами и стилями

Задача: Создать переиспользуемый компонент кнопки с вариантами состояния.

Промт:

Создай компонент Button для React Native (TypeScript) с пропсами: title, onPress, variant (primary/secondary/outline), disabled. Стилизуй через StyleSheet, добавь анимацию нажатия (Pressable). Обработай состояние загрузки (loading) с ActivityIndicator.

Пример результата:

import React from 'react';
import { Pressable, Text, StyleSheet, ActivityIndicator } from 'react-native';

type ButtonProps = {
  title: string;
  onPress: () => void;
variant?: 'primary'

| 'secondary' | 'outline';
  disabled?: boolean;
  loading?: boolean;
};

export const Button = ({ title, onPress, variant = 'primary', disabled = false, loading = false }: ButtonProps) => {
  const styles = getStyles(variant);
  return (
    <Pressable
      style={({ pressed }) => [
        styles.base,
        pressed && styles.pressed,
        disabled && styles.disabled,
      ]}
      onPress={onPress}
      disabled={disabled || loading}
    >
      {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.text}>{title}</Text>}
    </Pressable>
  );
};

const getStyles = (variant: string) => StyleSheet.create({
  base: { padding: 12, borderRadius: 8, alignItems: 'center' },
  pressed: { opacity: 0.7 },
  disabled: { backgroundColor: '#ccc' },
  text: { color: variant === 'outline' ? '#007AFF' : '#fff', fontWeight: '600' },
});

Почему это работает: Промт явно указывает технологию (React Native + TypeScript), структуру (пропсы, стили, состояния) и ожидаемый результат. AI генерирует код, который соответствует лучшим практикам — использует Pressable (рекомендуется в официальной документации React Native вместо TouchableOpacity) и StyleSheet для оптимизации производительности.

2. Настройка навигации в Flutter

Задача: Реализовать навигацию с нижней панелью и стеком экранов.

Промт:

На Flutter создай навигацию с BottomNavigationBar (3 вкладки: Home, Search, Profile) и Navigator для перехода к детальному экрану. Используй Navigator 2.0 (Router API) и go_router. Покажи код main.dart и структуру экранов.

Пример результата:

// main.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _router = GoRouter(
    routes: [
      ShellRoute(
        builder: (context, state, child) => MainShell(child: child),
        routes: [
          GoRoute(path: '/', builder: (context, state) => HomeScreen()),
          GoRoute(path: '/search', builder: (context, state) => SearchScreen()),
          GoRoute(path: '/profile', builder: (context, state) => ProfileScreen()),
        ],
      ),
      GoRoute(path: '/detail', builder: (context, state) => DetailScreen()),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(routerConfig: _router);
  }
}

class MainShell extends StatelessWidget {
  final Widget child;
  const MainShell({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onTap: (index) {
          switch (index) {
            case 0: context.go('/'); break;
            case 1: context.go('/search'); break;
            case 2: context.go('/profile'); break;
          }
        },
      ),
    );
  }
}

// Остальные экраны опущены для краткости

Почему это работает: go_router — стандарт для навигации в Flutter (рекомендован командой Flutter). Промт задаёт структуру, и AI генерирует рабочий код без лишних деталей.

3. Управление состоянием с Redux Toolkit (React Native)

Задача: Настроить глобальный стор для авторизации.

Промт:

Создай slice для авторизации в Redux Toolkit (React Native): состояние { token, user, isLoading, error }, асинхронный thunk для login (fetch API), селекторы для получения token и user.

Пример результата:

// authSlice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const login = createAsyncThunk('auth/login', async (credentials: { email: string; password: string }) => {
  const response = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credentials),
  });
  return response.json();
});

const authSlice = createSlice({
  name: 'auth',
  initialState: { token: null, user: null, isLoading: false, error: null },
  reducers: {
    logout: (state) => { state.token = null; state.user = null; },
  },
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => { state.isLoading = true; })
      .addCase(login.fulfilled, (state, action) => {
        state.isLoading = false;
        state.token = action.payload.token;
        state.user = action.payload.user;
      })
      .addCase(login.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      });
  },
});

export const { logout } = authSlice.actions;
export const selectToken = (state) => state.auth.token;
export const selectUser = (state) => state.auth.user;
export default authSlice.reducer;

Почему это работает: Redux Toolkit — официальный рекомендуемый способ работы с Redux (по документации Redux). Промт чётко описывает поля и логику, что снижает вероятность ошибок в сгенерированном коде.

Продвинутые промты: оптимизация и интеграция

4. Оптимизация производительности FlatList (React Native)

Задача: Устранить лаги при прокрутке длинного списка.

Промт:

Дан FlatList с 10 000 элементов. Предложи оптимизацию: useMemo для данных, React.memo для элементов, getItemLayout, windowSize, initialNumToRender. Объясни, какие параметры и почему.

Пример результата:

const ListItem = React.memo(({ item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

const optimizedData = useMemo(() => data.map(item => ({ ...item })), [data]);

<FlatList
  data={optimizedData}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <ListItem item={item} />}
  getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}
  windowSize={5}
  initialNumToRender={10}
/>

Почему это работает: Промт требует не только код, но и объяснение — это заставляет AI генерировать осознанные оптимизации, а не просто копипасту из документации.

5. Работа с нативными модулями в Flutter

Задача: Получить доступ к камере через MethodChannel.

Промт:

Напиши код для Flutter, который вызывает нативный метод Android (Kotlin) для открытия камеры и возвращает путь к фото. Покажи и Flutter-код, и Kotlin-код с MethodChannel.

Пример результата:

// Flutter side
static const platform = MethodChannel('com.example.app/camera');
Future<String> takePhoto() async {
  try {
    final String path = await platform.invokeMethod('takePhoto');
    return path;
  } on PlatformException catch (e) {
    throw Exception('Failed to take photo: ${e.message}');
  }
}

// MainActivity.kt
class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.example.app/camera")
            .setMethodCallHandler { call, result ->
                if (call.method == "takePhoto") {
                    // Реализация вызова камеры
                    val path = capturePhoto()
                    result.success(path)
                } else {
                    result.notImplemented()
                }
            }
    }
}

Почему это работает: Промт явно указывает на MethodChannel — официальный механизм для нативного кода (документация Flutter). AI генерирует правильный синтаксис для обеих платформ.

6. Тестирование виджетов Flutter

Задача: Написать тест для виджета кнопки с проверкой нажатия.

Промт:

Создай widget test для Flutter: проверь, что при нажатии на кнопку вызывается callback, и что текст кнопки изменяется. Используй pumpWidget, tap, expect.

Пример результата:

testWidgets('Button triggers callback and changes text', (WidgetTester tester) async {
  var pressed = false;
  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
        body: MyButton(onPressed: () => pressed = true),
      ),
    ),
  );

  expect(find.text('Нажми'), findsOneWidget);
  await tester.tap(find.byType(MyButton));
  await tester.pump();
  expect(pressed, isTrue);
  expect(find.text('Нажато'), findsOneWidget);
});

Почему это работает: Промт задаёт конкретные шаги и ожидания, что позволяет AI сгенерировать корректный тест без лишних деталей.

Экспертные промты: сложные сценарии

7. Интеграция с GraphQL в React Native

Задача: Настроить Apollo Client и выполнить мутацию.

Промт:

Настрой Apollo Client в React Native для работы с GraphQL API. Напиши query для получения списка постов и mutation для добавления поста. Используй useQuery и useMutation.

Пример результата:

import { ApolloClient, InMemoryCache, gql, useQuery, useMutation } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

const ADD_POST = gql`
  mutation AddPost($title: String!) {
    addPost(title: $title) {
      id
      title
    }
  }
`;

function Posts() {
  const { loading, error, data } = useQuery(GET_POSTS);
  const [addPost] = useMutation(ADD_POST);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View>
      {data.posts.map(post => <Text key={post.id}>{post.title}</Text>)}
      <Button title="Add" onPress={() => addPost({ variables: { title: 'New' } })} />
    </View>
  );
}

Почему это работает: Apollo Client — стандарт для GraphQL в React Native. Промт требует полноценную настройку, что экономит время на изучение документации.

8. Анимации в Flutter с использованием AnimationController

Задача: Создать плавную анимацию появления элемента.

Промт:

Напиши Flutter виджет с AnimationController: плавное появление (fade-in) и перемещение (slide-up) при первом рендере. Используй Tween и Curve.

Пример результата:

class FadeInSlide extends StatefulWidget {
  final Widget child;
  const FadeInSlide({super.key, required this.child});

  @override
  _FadeInSlideState createState() => _FadeInSlideState();
}

class _FadeInSlideState extends State<FadeInSlide> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _fade;
  late Animation<Offset> _slide;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _fade = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _slide = Tween<Offset>(begin: Offset(0, 0.5), end: Offset.zero).animate(_fade);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _fade,
      child: SlideTransition(position: _slide, child: widget.child),
    );
  }
}

Почему это работает: Промт описывает конкретные анимационные эффекты и использует стандартные классы Flutter, что гарантирует корректность.

9. Обработка офлайн-режима в React Native (NetInfo + AsyncStorage)

Задача: Реализовать кэширование данных для офлайн-доступа.

Промт:

Используя @react-native-community/netinfo и AsyncStorage, реализуй хук useOfflineData: сохраняет данные при наличии сети, при отсутствии — загружает из кэша. Покажи полный код.

Пример результата:

import { useEffect, useState } from 'react';
import NetInfo from '@react-native-community/netinfo';
import AsyncStorage from '@react-native-async-storage/async-storage';

function useOfflineData(fetchData: () => Promise<any>, cacheKey: string) {
  const [data, setData] = useState(null);
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOffline(!state.isConnected);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    async function load() {
      if (isOffline) {
        const cached = await AsyncStorage.getItem(cacheKey);
        if (cached) setData(JSON.parse(cached));
      } else {
        const fresh = await fetchData();
        await AsyncStorage.setItem(cacheKey, JSON.stringify(fresh));
        setData(fresh);
      }
    }
    load();
  }, [isOffline]);

  return { data, isOffline };
}

Почему это работает: Промт объединяет два популярных пакета и требует логику работы с сетью и кэшем — это типичная задача в реальных приложениях.

10. Динамическая темизация в Flutter (Dark/Light)

Задача: Реализовать переключение темы с сохранением выбора.

Промт:

Создай систему тем для Flutter: ThemeData для light и dark, переключатель в настройках, сохранение через SharedPreferences. Покажи, как использовать Provider для управления темой.

Пример результата:

class ThemeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;
  ThemeMode get themeMode => _themeMode;

  Future<void> toggleTheme() async {
    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isDark', _themeMode == ThemeMode.dark);
  }

  Future<void> loadTheme() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool isDark = prefs.getBool('isDark') ?? false;
    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

// В main: MultiProvider(providers: [ChangeNotifierProvider(create: (_) => ThemeProvider()..loadTheme())], child: MaterialApp(themeMode: context.watch<ThemeProvider>().themeMode, ...))

Почему это работает: Промт требует интеграцию с SharedPreferences и Provider — стандартные инструменты Flutter. AI генерирует полное решение с учётом лучших практик.

Заключение

Эти 10 промтов — не серебряная пуля, но они покрывают 80% рутинных задач в кросс-платформенной разработке. Главное — быть конкретным: указывать фреймворк, библиотеки, ожидаемый результат. Попробуйте адаптировать их под свои проекты, и вы заметите, как AI становится не просто автодополнением, а полноценным партнёром по разработке. Начните с базовых промтов, постепенно переходя к экспертным — и 2026 год станет для вас годом двукратного роста продуктивности.