Wzorce Rozwoju React Native

Opanuj rozwój React Native z Cursor i Claude Code. Te wzorce obejmują rozwój mobilny wieloplatformowy, integrację modułów natywnych, optymalizację wydajności oraz strategie wdrażania dla iOS i Androida.

Szybka Konfiguracja dla Projektów React Native

Inicjalizacja React Native z AI

Cursor
Claude Code

Otwórz Cursor w swoim obszarze roboczym
Aktywuj tryb Agent (Cmd/Ctrl + I)
Prompt: “Utwórz nową aplikację React Native z TypeScript, React Navigation, React Native Paper UI i konfiguracją testów”
Pozwól agentowi obsłużyć polecenia CLI i początkową konfigurację
Przejrzyj wygenerowaną strukturę i konfigurację

Otwórz terminal w Claude Code
Uruchom: claude "Zainicjuj projekt React Native TypeScript z Expo, nawigacją i zarządzaniem stanem"
Claude skonfiguruje całą strukturę projektu
Przejrzyj wygenerowaną architekturę

Wzorce Rozwoju Komponentów

Tworzenie Komponentów Wielokrotnego Użytku

Wzorzec Cursor
Wzorzec Claude Code

// Użyj trybu Agent Cursor do generowania komponentów
// Prompt: "Utwórz komponent Button wielokrotnego użytku z:
// - Wsparciem TypeScript
// - Wieloma wariantami (primary, secondary, danger)
// - Stanem ładowania
// - Funkcjami dostępności
// - Stylowaniem specyficznym dla platformy"

// Agent wygeneruje:
import React from 'react';
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  Platform,
  TouchableOpacityProps,
} from 'react-native';

interface ButtonProps extends TouchableOpacityProps {
  variant?: 'primary' | 'secondary' | 'danger';
  loading?: boolean;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  loading = false,
  children,
  disabled,
  style,
  ...props
}) => {
  // Implementacja komponentu ze stylowaniem specyficznym dla platformy
};

# Użyj kontekstowego zrozumienia Claude Code
claude "Utwórz tematyczny komponent Button zgodny z naszym systemem projektowania"

# Claude przeanalizuje istniejące komponenty i stworzy spójne wzorce

Wzorce Nawigacji

Złożona Konfiguracja Nawigacji

// Prompt Cursor Agent:
"Skonfiguruj React Navigation z:
- Nawigatorem zakładek dolnych
- Nawigatorami stosowymi dla każdej zakładki
- Wsparciem głębokich linków
- Typami TypeScript
- Przepływem uwierzytelniania"

// Agent utworzy kompletną strukturę nawigacji

Wzorce Zarządzania Stanem

Konfiguracja Redux Toolkit

Inicjalizacja z AI: “Skonfiguruj Redux Toolkit z TypeScript dla React Native”
Generowanie Slice’ów: “Utwórz slice użytkownika z asynchronicznymi thunkami dla wywołań API”
Łączenie Komponentów: “Dodaj hooki Redux do komponentu UserProfile”
Dodawanie Persystencji: “Zaimplementuj Redux Persist z AsyncStorage”

Alternatywa Zustand

// Prompt Cursor dla lekkiego zarządzania stanem:
"Utwórz store Zustand dla:
- Stanu uwierzytelniania użytkownika
- Ustawień aplikacji
- Kolejki offline dla wywołań API
- Interfejsów TypeScript"

Integracja Modułów Natywnych

// Cursor Agent może pomóc z rozgałęzieniem platformy
// Prompt: "Utwórz implementację sprzężenia zwrotnego haptycznego dla iOS"

import { Platform, NativeModules } from 'react-native';

const HapticFeedback = Platform.select({
  ios: () => NativeModules.HapticFeedback,
  android: () => null,
})();

// Prompt: "Dodaj obsługę uprawnień specyficzną dla Androida"

import { PermissionsAndroid, Platform } from 'react-native';

const requestCameraPermission = async () => {
  if (Platform.OS === 'android') {
    // Implementacja specyficzna dla Androida
  }
};

Optymalizacja Wydajności

Wzorce Optymalizacji List

// Prompt Cursor dla zoptymalizowanych list:
"Utwórz wydajny FlatList z:
- Optymalizacją memo
- Implementacją getItemLayout
- keyExtractor
- Paginacją onEndReached
- Obsługą pustego stanu"

Optymalizacja Obrazów

Obsługa Obrazów Wspomagana przez AI

Pozwól Cursor/Claude zaimplementować:

Strategie leniwego ładowania
Zarządzanie pamięcią podręczną
Progresywne ładowanie obrazów
Optymalizację pamięci

Wzorce Testowania

Testowanie Komponentów

// Prompt Cursor Agent:
"Napisz kompleksowe testy dla komponentu Button używając:
- React Native Testing Library
- Jest
- Przypadków testowych specyficznych dla platformy
- Testów dostępności"

Testowanie E2E z Detox

Konfiguracja: “Skonfiguruj Detox dla projektu React Native”
Pisanie Testów: “Utwórz test E2E dla przepływu logowania”
Integracja CI: “Dodaj testy Detox do GitHub Actions”

Przepływy Debugowania

Integracja Flipper

# Claude Code może skonfigurować narzędzia debugowania
claude "Skonfiguruj Flipper z:
1. Wtyczką sieciową do debugowania API
2. Integracją React DevTools
3. Przeglądarką AsyncStorage
4. Wsparciem debuggera Hermes"

Wskazówki Zdalnego Debugowania

Wzorce Wdrażania

Konfiguracja CI/CD

Wdrażanie iOS
Wdrażanie Android

# Prompt Cursor: "Utwórz workflow GitHub Actions dla wdrażania iOS"
# Zawiera:
# - Zarządzanie certyfikatami
# - Upload do TestFlight
# - Zwiększanie wersji

# Prompt: "Skonfiguruj wdrażanie Androida z:
# - Upload do Play Store
# - Podpisywanie aplikacji
# - Generowanie notatek o wydaniu"

Typowe Przepisy

Przepływ Uwierzytelniania

// Kompletny prompt implementacji uwierzytelniania:
"Zaimplementuj przepływ uwierzytelniania z:
1. Ekrany logowania/rejestracji
2. Uwierzytelnianie biometryczne
3. Logika odświeżania tokenów
4. Bezpieczne przechowywanie
5. Głębokie linkowanie dla callbacków uwierzytelniania"

Architektura Offline-First

// Cursor Agent może zaimplementować:
"Utwórz architekturę offline-first z:
- Lokalną bazą danych SQLite
- Kolejką synchronizacji dla wywołań API
- Rozwiązywaniem konfliktów
- Synchronizacją w tle
- Monitorowaniem stanu sieci"

Powiadomienia Push

Konfiguracja: “Skonfiguruj powiadomienia push dla iOS i Androida”
Uprawnienia: “Zaimplementuj przepływ uprawnień powiadomień”
Handlery: “Utwórz handlery powiadomień dla pierwszego planu/tła”
Głębokie Linki: “Dodaj głębokie linkowanie z powiadomień”

Najlepsze Praktyki z AI

Efektywne Promptowanie

// Dobra struktura promptu:
"Utwórz [typ komponentu] który:
- Wymaganie 1 ze szczegółami
- Wymaganie 2 z ograniczeniami
- Zgodny z naszymi istniejącymi wzorcami w [odniesienie do pliku]
- Zawiera typy TypeScript
- Ma testy jednostkowe"

Przegląd Kodu z AI

Przegląd Kodu Wspomagany przez AI

Użyj Cursor/Claude do:

Sprawdzania zgodności z dostępnością
Weryfikacji obsługi specyficznej dla platformy
Optymalizacji rozmiaru paczki
Zapewnienia spójnego stylowania

Zaawansowane Wzorce

Tworzenie Modułów Natywnych

// Cursor może pomóc w tworzeniu modułów natywnych
// Prompt: "Utwórz moduł natywny iOS dla:
// - Niestandardowej funkcjonalności kamery
// - Mostka Objective-C
// - Implementacji Swift
// - Definicji TypeScript"

Monitorowanie Wydajności

// Implementuj śledzenie wydajności:
"Dodaj monitorowanie wydajności z:
- Czasami renderowania komponentów
- Przejściami nawigacji
- Czasami odpowiedzi API
- Alarmami użycia pamięci
- Raportowaniem awarii"

Następne Kroki

Poznaj wzorce Flutter dla rozwoju Dart
Dowiedz się o przepływach Expo dla zarządzanych aplikacji
Zobacz wzorce integracji backendu dla rozwoju API