Tworzenie aplikacji mobilnych z Cursor
Twój zespół musi dostarczyć aplikację mobilną działającą zarówno na iOS, jak i Android. Projektanci przekazali Ci makiety w Figma, backend API już istnieje, a deadline jest za sześć tygodni. Wybrałeś React Native, ponieważ Twój zespół zna TypeScript, ale nikt nie ma głębokiego doświadczenia z natywnymi modułami. Pierwszy ekran zajął trzy dni, bo połowa czasu poszła na debugowanie problemów z Metro bundler, quirki ze stylowaniem specyficznym dla platformy i konfigurację biblioteki nawigacji. W tym tempie nie dotrzymasz deadline’u.
Cursor zmienia równanie dla rozwoju mobilnego, ponieważ rozumie Twoją strukturę projektu, bibliotekę komponentów i ograniczenia platformy jednocześnie. Zamiast przełączać kontekst między Stack Overflow, dokumentacją React Native i przewodnikami specyficznymi dla platformy, pozostajesz w edytorze i pozwalasz Agent obsłużyć cross-platformową złożoność.
Co wyniesiesz
Dział zatytułowany „Co wyniesiesz”- Konfigurację reguł projektu, która sprawia, że Cursor jest świadomy różnic między iOS a Android
- Prompty do generowania ekranów, przepływów nawigacji i komponentów specyficznych dla platformy
- Workflow do łączenia React Native z istniejącymi backend API
- Techniki debugowania problemów specyficznych dla mobile (Metro, natywne moduły, uprawnienia)
- Strategie obsługi ścieżek kodu specyficznych dla platformy w trybie Agent
Konfiguracja Cursor dla React Native
Dział zatytułowany „Konfiguracja Cursor dla React Native”Projekty mobilne mają więcej kontekstu niż projekty webowe. Potrzebujesz, żeby Cursor rozumiał nie tylko Twój kod TypeScript, ale także Twoją natywną konfigurację (pliki projektu Xcode, konfiguracje build Gradle), strukturę nawigacji i nadpisania specyficzne dla platformy.
Zacznij od .cursorignore, który utrzymuje skupiony indeks:
ios/Pods/android/.gradle/android/build/android/app/build/node_modules/.expo/*.lockKatalogi natywnych zależności są ogromne i rzadko pomocne dla kontekstu AI. Wykluczenie ich przyspiesza indeksowanie i utrzymuje Agent skupionego na Twoim kodzie aplikacji.
Następnie utwórz reguły projektu, które kodują Twoją architekturę mobilną:
# React Native Project
## Stack- React Native 0.76 z włączoną nową architekturą- TypeScript strict mode- React Navigation 7 (native stack)- Zustand dla zarządzania stanem- React Query dla wywołań API- Nativewind (Tailwind CSS dla React Native)
## Konwencje platformy- Pliki specyficzne dla platformy używają rozszerzeń .ios.tsx / .android.tsx- Komponenty współdzielone idą do src/components/- Ekrany idą do src/screens/ z jednym plikiem na ekran- Nawigacja zdefiniowana w src/navigation/- Warstwa API w src/api/ używająca hooków React Query
## Stylowanie- Używaj Nativewind className do stylowania, nie StyleSheet.create- Wszystkie odstępy używają jednostki bazowej 4px (p-1 = 4px, p-2 = 8px)- Używaj SafeAreaView na poziomie ekranu, nie komponentu- Testuj zarówno na iPhone SE (mały), jak i iPhone 15 Pro Max (duży)
## Ważne- To jest React Native, nie React DOM. Nigdy nie używaj elementów HTML ani web CSS.- Zawsze obsługuj zachowania zarówno iOS, jak i Android- Testuj unikanie klawiatury na formularzach- Używaj Platform.select() dla wartości specyficznych dla platformy- Obrazy muszą zawierać warianty @2x i @3xTworzenie ekranów z projektów
Dział zatytułowany „Tworzenie ekranów z projektów”Najczęstszym zadaniem w rozwoju mobilnym jest przekształcenie projektu w ekran. Cursor świetnie sobie z tym radzi, gdy podasz mu odpowiedni kontekst.
Kluczem do dobrego generowania ekranów jest odwoływanie się do istniejących komponentów. Gdy wskażesz Agent na Button.tsx i Input.tsx, używa Twojego faktycznego API komponentu (props, warianty, style) zamiast wymyślać własne.
Obsługa różnic platformy
Dział zatytułowany „Obsługa różnic platformy”Gdy ekran musi zachowywać się inaczej na iOS i Android, bądź wyraźny:
@src/screens/ProfileScreen.tsx
Ekran profilu potrzebuje następujących dostosowań specyficznych dla platformy:
iOS:- Użyj dużego tytułu w nagłówku nawigacji (headerLargeTitle: true)- Date picker powinien używać inline iOS style- Haptyczne potwierdzenie przy naciśnięciu przycisku zapisu
Android:- Użyj standardowego material header- Date picker powinien używać Android dialog style- Użyj systemowego gestu cofania, nie niestandardowego przycisku wstecz
Użyj Platform.select() dla prostych wartości. Dla złożonych różnic,utwórz ProfileScreen.ios.tsx i ProfileScreen.android.tsx jeśli potrzeba.Łączenie z backend API
Dział zatytułowany „Łączenie z backend API”Aplikacje mobilne są konsumentami API. Cursor może wygenerować całą Twoją warstwę integracji API, jeśli podasz mu kontrakt backendu.
Praca z nawigacją
Dział zatytułowany „Praca z nawigacją”Nawigacja jest jedną z najbardziej podatnych na błędy części rozwoju React Native. Deep linking, struktury zakładek i stosy uwierzytelnione vs nieuwierzytelnione mają wszystkie subtelne wymagania konfiguracyjne.
@src/navigation
Refaktoryzuj naszą nawigację, aby obsługiwać:1. Przepływ uwierzytelniania: Login -> Rejestracja -> Resetowanie hasła (bez gestu cofania do głównej aplikacji)2. Główne zakładki: Home, Wyszukiwanie, Powiadomienia, Profil3. Stos modalny: każdy ekran może prezentować modal (np. tworzenie posta, ustawienia)4. Deep linking: myapp://profile, myapp://post/:id, myapp://notifications
Wymagania:- Pasek zakładek powinien się ukrywać, gdy klawiatura jest otwarta na Android- Zakładka powiadomień powinna pokazywać odznakę nieprzeczytanych- Deep linki powinny działać, gdy aplikacja jest uruchamiana na zimno- Ekrany uwierzytelnione przekierowują do logowania, jeśli nie ma tokenu
Użyj React Navigation 7 z native stack.Podążaj za wzorcami nawigacji już obecnymi w naszej bazie kodu.Debugowanie problemów specyficznych dla mobile
Dział zatytułowany „Debugowanie problemów specyficznych dla mobile”Rozwój mobilny ma unikalną klasę bugów, które nie istnieją w rozwoju webowym: crashe Metro bundler, awarie linkowania natywnych modułów, problemy z uprawnieniami platformy i bugi renderowania specyficzne dla urządzenia. Tryb Ask w Cursor jest Twoim pierwszym narzędziem do tych problemów.
Problemy Metro Bundler
Dział zatytułowany „Problemy Metro Bundler”Moja aplikacja React Native nie uruchamia się z tym błędem Metro:
error: Error: Unable to resolve module @react-navigation/native-stackfrom src/navigation/RootNavigator.tsx
Wykonałem npm install i pakiet jest w node_modules.Jakie są częste przyczyny tego, że Metro nie rozwiązuje zainstalowanych pakietów?Tryb Ask przeprowadzi Cię przez zwykłe podejrzane: przestarzały cache Metro (npx react-native start --reset-cache), brakującą konfigurację babel dla pakietu lub niezgodność wersji między pakietami React Navigation.
Awarie natywnych modułów
Dział zatytułowany „Awarie natywnych modułów”Po dodaniu react-native-camera, build iOS kończy się niepowodzeniem z:
ld: framework not found AVFoundationclang: error: linker command failed with exit code 1
Ale AVFoundation jest frameworkiem systemowym. Co jest nie tak?
Używam React Native 0.76 z nową architekturą.Mój Podfile jest w @ios/Podfile.Agent może przeanalizować Twój Podfile i zidentyfikować brakujące instalacje pod, nieprawidłowe fazy build lub problemy z linkowaniem frameworka specyficzne dla nowej architektury.
Debugowanie problemów z układem
Dział zatytułowany „Debugowanie problemów z układem”Bugi układu mobilnego są notorycznie trudne do debugowania, ponieważ nie możesz inspekcować elementów tak, jak w przeglądarce. Opisz wizualny problem Cursor:
@src/screens/ChatScreen.tsx
Lista wiadomości czatu renderuje się poprawnie, ale gdy otwiera się klawiatura:1. Pole input jest ukryte za klawiaturą na Android2. Na iOS, lista przewija się poprawnie, ale jest 20px luka na dole3. FAB "przewiń na dół" nakłada się z polem input
Oto moja obecna konfiguracja KeyboardAvoidingView. Co jest nie taki jak to naprawić dla obu platform?Budowanie funkcji offline-first
Dział zatytułowany „Budowanie funkcji offline-first”Aplikacje mobilne muszą działać bez niezawodnej łączności sieciowej. To jest problem przekrojowy, w którym Cursor może pomóc wpleść go przez Twój istniejący kod:
Kiedy to się psuje
Dział zatytułowany „Kiedy to się psuje”Agent generuje kod specyficzny dla web w projekcie React Native. Dzieje się to, gdy Twoje reguły nie są aktywne lub gdy AI myli React DOM z React Native. Najczęstszy objaw: generowanie <div> zamiast <View>, lub używanie właściwości CSS jak box-shadow, które nie istnieją w React Native. Twoje reguły projektu powinny wyraźnie stwierdzać “To jest React Native. Nigdy nie używaj elementów HTML ani CSS specyficznego dla web.”
Pliki specyficzne dla platformy nie są wykrywane przez Metro. Jeśli Agent tworzy Component.ios.tsx, ale Metro wciąż ładuje bazowy Component.tsx, plik bazowy ma priorytet. Rozdzielczość platformy React Native wymaga albo plików specyficznych dla platformy bez pliku bazowego, albo pliku bazowego, który re-eksportuje ze specyficznych dla platformy.
Wygenerowany kod natywnego modułu się nie kompiluje. Agent może pisać mostki Objective-C i moduły Kotlin, ale konfiguracja build jest często błędna. Dla problemów z natywnymi modułami, dostarcz swój Podfile (iOS) lub build.gradle (Android) jako kontekst, aby Agent generował kompatybilne konfiguracje.
Typy React Navigation są nieprawidłowe. Typowanie nawigacji w React Navigation jest złożone. Jeśli Agent generuje ekrany z nieprawidłowymi parametrami route, odwołaj się wyraźnie do pliku src/navigation/types.ts. AI musi zobaczyć Twój typ RootStackParamList, aby wygenerować prawidłowe propsy nawigacji.
Style wyglądają inaczej na iOS i Android. Renderowanie cieni, wagi czcionek i padding zachowują się inaczej na różnych platformach. Gdy generujesz ekrany, powiedz Agent: “Użyj Platform.select dla cieni, ponieważ iOS używa shadowColor/shadowOffset, a Android używa elevation.”