Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Wenn ein mit der Webentwicklung vertrauter Junior-Entwickler mit der Entwicklung von mobilen Apps beginnt, besteht die erste Schwierigkeit meist aus komplexen Build-Fehlern, die während der Einrichtung der lokalen nativen Toolchain auftreten. Da der herkömmliche Ansatz von React Native die manuelle Installation von Toolchains wie Android Studio, Xcode, Gradle und CocoaPods erfordert, verschwendet man oft Stunden oder Tage mit Versionskonflikten, noch bevor man überhaupt Code geschrieben hat. Um dieses Problem zu lösen, können Sie den Expo Managed Workflow nutzen, um die Entwicklung in nur 5 Minuten ganz ohne native Konfiguration zu starten.
Führen Sie die folgenden 3 Schritte aus, um innerhalb von 5 Minuten eine Live-Testumgebung auf einem echten Mobilgerät einzurichten: Erstens öffnen Sie das Terminal, geben den Befehl zur Erstellung eines neuen Expo-Template-Projekt ein, wechseln in das entsprechende Verzeichnis und starten den Entwicklungsserver. Der einzugebende Befehl im Terminal lautet wie folgt:
`bash
npx create-expo-app@latest my-mobile-app --template default
cd my-mobile-app
npx expo start
`
Zweitens installieren Sie die Expo Go App auf Ihrem echten Smartphone anstelle eines Emulators, der die Systemressourcen Ihres Computers beansprucht. Drittens scannen Sie den im Terminal generierten QR-Code mit der Standardkamera-App unter iOS oder dem integrierten Scanner von Expo Go unter Android, woraufhin das Haupt-Bundle innerhalb weniger Sekunden kompiliert und sofort auf dem Gerät ausgeführt wird. Durch diesen Ansatz können Entwickler Hot-Reloading nutzen, ohne den Stress lokaler Builds zu haben, und ihre Entwicklungszeit um mehr als 2 Stunden verkürzen.
Die willkürliche Unterteilung von Ordnern nach Komponenten, Hooks und Bildschirmtypen gemäß der Trägheit kleiner Webprojekte verringert die Kohäsion des Codes, je größer die mobile App wird. Da Expo Router dateibasiertes Routing unterstützt, sollte der gesamte Quellcode im src-Verzeichnis isoliert und die Bildschirm-Routing-Pfade auf src/app/ beschränkt werden. Um eine skalierbare Struktur für mobile Apps zu entwerfen, führen Sie die folgenden 3 Schritte der Reihe nach aus: Erstens modifizieren Sie die Datei tsconfig.json im Projektstamm, um relative Pfadreferenzen zu verhindern und Pfad-Aliase einzurichten. Der hinzuzufügende Code für die Konfiguration lautet wie folgt:
`json
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {
"@/": ["./src/"]
}
}
}
`
Zweitens erstellen Sie die oberste Root-Layout-Datei src/app/_layout.tsx, um den gesamten Navigations-Stack zu definieren und Header-Optionen für jeden Bildschirm festzulegen. Drittens trennen und platzieren Sie funktionsbezogene Geschäftsmodule und gemeinsame UI-Komponenten in den Verzeichnissen src/features/ und src/components/, um Routing und Geschäftslogik voneinander zu trennen. Durch die Einführung dieser Struktur lassen sich komplexe relative Pfadreferenzfehler vollständig beseitigen und Nebeneffekte beim Hinzufügen von Funktionen reduzieren.
In mobilen Umgebungen kommt es aufgrund häufiger Wechsel zwischen Mobilfunknetzwerken und WLAN oft zu Netzwerkabbrüchen während der asynchronen Kommunikation, und die Standard-Fetch-API besitzt kein Timeout, was zum Einfrieren der App führt. Um dies zu verhindern, sollten Sie Offline-Caching durch die Kombination von TanStack Query und lokalerspeicherung implementieren sowie Error Boundaries auf Routenebene anwenden. Um erzwungene App-Abbrüche durch Laufzeitfehler zu verhindern und Stabilität zu gewährleisten, führen Sie die folgenden 3 Schritte aus: Erstens schreiben Sie eine Fetch-Wrapper-Dienstprogrammfunktion, die AbortController und Timer verwendet, um Netzwerkabfragen im Falle einer Zeitüberschreitung gewaltsam abzubrechen. Zweitens konfigurieren Sie die Einstellungen des TanStack Query Clients so, dass der Offline-Cache für 24 Stunden beibehalten wird, und binden einen asynchronen Persister für den permanenten Speicher an. Der für die Konfiguration zu verwendende Code lautet wie folgt:
`typescript
import AsyncStorage from '@react-native-async-storage/async-storage';
import { QueryClient } from '@tanstack/react-query';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24,
staleTime: 1000 * 60 * 5,
retry: 2,
},
},
});
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
key: 'APP_OFFLINE_CACHE',
});
`
Drittens exportieren Sie Error Boundaries und Suspense-Fallback-Komponenten direkt auf der Routenebene von Expo Router, um dem Benutzer im Falle eines Render-Fehlers eine Wiederholen-Schaltfläche und eine klare Feedback-UI bereitzustellen. Durch die Anwendung dieses mehrschichtigen Ausnahmebehandlungssystems lässt sich das Einfrieren der App mit einem weißen Bildschirm bei Netzwerkabbrüchen effektiv blockieren.
