Handleidingen
- Aan de slag
- First Project
- Webapplicaties
- Mobiele applicaties
- 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
Je leert:
- React Native projectopzet
- Cross-platform UI-componenten
- Navigatie en routing
- Native apparaatfuncties
- Voorbereiding voor app store-implementatie
Cross-platform mobiele app met React Native
Bouw een app die werkt op zowel iOS als Android vanuit één enkele codebase
Met React Native kun je mobiele apps bouwen voor zowel iOS als Android met één enkele codebase. In deze tutorial genereert ZBuild een volledige mobiele applicatie die native draait op beide platforms.
Eén codebase, twee platforms. Implementeer naar beide app stores vanuit één enkel project.
Vereisten
- ZBuild Studio-account
- Basiservaring met React is nuttig maar niet vereist
- Expo Go-app op je telefoon om te testen
Projectoverzicht
We bouwen een taakbeheer-app met deze voor mobiel geoptimaliseerde functies:
Native navigatie
Tabbladbalk, stack-navigatie, modals
Gebaar-ondersteuning
Swipen om te verwijderen, pull-to-refresh
Pushmeldingen
Herinneringen voor aankomende taken
Offline ondersteuning
Werkt zonder internetverbinding
Camera-integratie
Foto's toevoegen aan taken
Donkere modus
Automatische thema-omschakeling
Stap 1: Definieer je mobiele app
Beschrijf je mobiele app aan Conductor met platformspecifieke functies in gedachten.
Ik wilt een mobiele app voor taakbeheer bouwen.
Functies:
- Takenlijsten met categorieën
- Deadlines met herinneringen via pushmeldingen
- Fotobijlagen met de camera of galerij
- Swipe-gebaren (swipen om te voltooien, swipen om te verwijderen)
- Pull-to-refresh
- Offline modus met synchronisatie wanneer online
- Ondersteuning voor donkere modus
Navigatie:
- Onderste tabbladbalk (Taken, Kalender, Instellingen)
- Stack-navigatie binnen elk tabblad
Platforms: iOS en Android
Framework: React Native met ExpoStap 2: Native componenten
Virtuoso creëert platform-geschikte componenten die native aanvoelen op elk platform.
iOS-stijl UI
San Francisco lettertype, iOS-navigatiepatronen
Android-stijl UI
Material Design elementen, Android-navigatie
Adaptieve lay-outs
Past zich aan verschillende schermformaten aan
Safe Areas
Houdt rekening met notches en home-indicatoren
Stap 3: Apparaatfuncties
Krijg toegang tot native apparaatfuncties via React Native bridges.
- Toegang tot camera en fotobibliotheek
- Configuratie van pushmeldingen
- Lokale opslag met AsyncStorage
- Haptische feedback bij interacties
- Optie voor biometrische authenticatie
Stap 4: Testen op apparaat
Test je app op echte apparaten met Expo Go.
- Scan de QR-code met de Expo Go-app
- De app wordt geladen op je fysieke apparaat
- Breng wijzigingen aan en zie live updates
- Test tegelijkertijd op meerdere apparaten
Best Practice Test op zowel iOS- als Android-apparaten om platformspecifieke problemen vroegtijdig te ontdekken.
Wat je hebt gebouwd
- Cross-platform mobiele app (iOS & Android)
- Native navigatie en gebaren
- Integratie van camera en pushmeldingen
- Offline-mogelijkheden met gegevenssynchronisatie
- Ondersteuning voor donkere modus
Volgende stappen
Locatiegebaseerde app
Voeg GPS en kaarten toe aan je mobiele app
Mobiele e-commerce
Bouw een shopping-app met betalingen
Klaar om je mobiele app te bouwen?
Begin vandaag nog met het bouwen van je cross-platform mobiele app.