Tutorials
- Erste Schritte
- First Project
- Web-Anwendungen
- Mobile Anwendungen
- React Native App
- SaaS Platform
- E-commerce Platform
- Real-Time Dashboard
- Location-Based App
- Mobile E-commerce
- Optimizing Sales
- Publishing Your App
- Acceptance Criteria
- Template Business
- Watching Virtuoso
Das werden Sie lernen:
- React Native Projekt-Setup
- Plattformübergreifende UI-Komponenten
- Navigation und Routing
- Native Gerätefunktionen
- Vorbereitung für das Deployment im App Store
Plattformübergreifende mobile App mit React Native
Erstellen Sie eine App, die auf iOS und Android mit einer einzigen Codebasis funktioniert
Mit React Native können Sie mobile Apps für iOS und Android mit einer einzigen Codebasis erstellen. In diesem Tutorial wird ZBuild eine vollständige mobile Anwendung generieren, die nativ auf beiden Plattformen läuft.
Eine Codebasis, zwei Plattformen. Veröffentlichen Sie in beiden App Stores aus einem einzigen Projekt.
Voraussetzungen
- ZBuild Studio Konto
- Grundkenntnisse in React sind hilfreich, aber nicht erforderlich
- Expo Go App auf Ihrem Handy zum Testen
Projektübersicht
Wir bauen eine Aufgabenverwaltungs-App mit diesen für Mobilgeräte optimierten Funktionen:
Native Navigation
Tab-Leiste, Stack-Navigation, Modals
Gestensteuerung
Wischen zum Löschen, Ziehen zum Aktualisieren
Push-Benachrichtigungen
Erinnerungen für anstehende Aufgaben
Offline-Unterstützung
Funktioniert ohne Internetverbindung
Kamera-Integration
Fotos an Aufgaben anhängen
Dunkelmodus
Automatische Themenumschaltung
Schritt 1: Definieren Sie Ihre mobile App
Beschreiben Sie Conductor Ihre mobile App unter Berücksichtigung plattformspezifischer Funktionen.
Ich möchte eine mobile App zur Aufgabenverwaltung erstellen.
Funktionen:
- Aufgabenlisten mit Kategorien
- Fälligkeitstermine mit Push-Benachrichtigungs-Erinnerungen
- Fotoanhänge über Kamera oder Galerie
- Wischgesten (Wischen zum Abschließen, Wischen zum Löschen)
- Ziehen zum Aktualisieren
- Offline-Modus mit Synchronisierung bei Online-Verbindung
- Unterstützung für Dunkelmodus
Navigation:
- Untere Tab-Leiste (Aufgaben, Kalender, Einstellungen)
- Stack-Navigation innerhalb jedes Tabs
Plattformen: iOS und Android
Framework: React Native mit ExpoSchritt 2: Native Komponenten
Virtuoso erstellt plattformgerechte Komponenten, die sich auf jeder Plattform nativ anfühlen.
iOS-Stil UI
San Francisco Schriftart, iOS Navigationsmuster
Android-Stil UI
Material Design Elemente, Android Navigation
Adaptive Layouts
Passt sich an verschiedene Bildschirmgrößen an
Safe Areas
Berücksichtigt Notches und Home-Indikatoren
Schritt 3: Gerätefunktionen
Greifen Sie über React Native Bridges auf native Gerätefunktionen zu.
- Zugriff auf Kamera und Fotomediathek
- Einrichtung von Push-Benachrichtigungen
- Lokaler Speicher mit AsyncStorage
- Haptisches Feedback bei Interaktionen
- Option für biometrische Authentifizierung
Schritt 4: Testen auf dem Gerät
Testen Sie Ihre App auf echten Geräten mit Expo Go.
- QR-Code mit der Expo Go App scannen
- App wird auf Ihrem physischen Gerät geladen
- Änderungen vornehmen und Live-Updates sehen
- Gleichzeitiges Testen auf mehreren Geräten
Best Practice Testen Sie sowohl auf iOS- als auch auf Android-Geräten, um plattformspezifische Probleme frühzeitig zu erkennen.
Was Sie gebaut haben
- Plattformübergreifende mobile App (iOS & Android)
- Native Navigation und Gesten
- Integration von Kamera und Push-Benachrichtigungen
- Offline-fähig mit Datensynchronisation
- Unterstützung für Dunkelmodus
Nächste Schritte
Standortbasierte App
Fügen Sie GPS und Karten zu Ihrer mobilen App hinzu
Mobiler E-Commerce
Erstellen Sie eine Shopping-App mit Zahlungsfunktionen
Bereit, Ihre mobile App zu bauen?
Beginnen Sie noch heute mit der Erstellung Ihrer plattformübergreifenden mobilen App.