Tutoriály
- Začínáme
- First Project
- Webové aplikace
- Mobilní aplikace
- 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
Naučíte se:
- Nastavení projektu React Native
- UI komponenty pro více platforem
- Navigace a směrování
- Nativní funkce zařízení
- Příprava na nasazení do obchodů s aplikacemi
Mobilní aplikace pro více platforem s React Native
Sestavte aplikaci, která funguje na iOS i Androidu z jediného kódového základu
React Native vám umožňuje vytvářet mobilní aplikace pro iOS i Android s jediným kódovým základem. V tomto tutoriálu ZBuild vygeneruje kompletní mobilní aplikaci, která běží nativně na obou platformách.
Jeden kód, dvě platformy. Nasazujte do obou obchodů s aplikacemi z jediného projektu.
Předpoklady
- Účet ZBuild Studio
- Základní znalost React je výhodou, ale není vyžadována
- Aplikace Expo Go ve vašem telefonu pro testování
Přehled projektu
Vytvoříme aplikaci pro správu úkolů s těmito funkcemi optimalizovanými pro mobilní zařízení:
Nativní navigace
Panel karet, navigace v zásobníku, modální okna
Podpora gest
Přejetí pro smazání, stažení pro obnovení
Push notifikace
Připomenutí nadcházejících úkolů
Offline podpora
Funguje bez připojení k internetu
Integrace fotoaparátu
Připojování fotografií k úkolům
Tmavý režim
Automatické přepínání motivů
Krok 1: Definujte svou mobilní aplikaci
Popište svou mobilní aplikaci nástroji Conductor s ohledem na specifické funkce platformy.
Chci vytvořit mobilní aplikaci pro správu úkolů.
Funkce:
- Seznamy úkolů s kategoriemi
- Termíny s připomenutím pomocí push notifikací
- Přílohy fotografií pomocí fotoaparátu nebo galerie
- Gesta přejetí (přejetí pro dokončení, přejetí pro smazání)
- Stažení pro obnovení
- Offline režim se synchronizací po připojení
- Podpora tmavého režimu
Navigace:
- Spodní panel karet (Úkoly, Kalendář, Nastavení)
- Navigace v zásobníku v rámci každé karty
Platformy: iOS a Android
Framework: React Native s ExpoKrok 2: Nativní komponenty
Virtuoso vytváří komponenty vhodné pro danou platformu, které působí nativně na každém systému.
UI ve stylu iOS
Písmo San Francisco, navigační vzory iOS
UI ve stylu Android
Prvky Material Design, navigace Android
Adaptivní rozvržení
Přizpůsobí se různým velikostem obrazovky
Bezpečné oblasti
Respektuje výřezy a indikátory domovské obrazovky
Krok 3: Funkce zařízení
Získejte přístup k nativním funkcím zařízení prostřednictvím mostů React Native.
- Přístup k fotoaparátu a knihovně fotografií
- Nastavení push notifikací
- Místní úložiště s AsyncStorage
- Haptická odezva při interakcích
- Možnost biometrického ověřování
Krok 4: Testování na zařízení
Otestujte svou aplikaci na reálných zařízeních pomocí Expo Go.
- Naskenujte QR kód pomocí aplikace Expo Go
- Aplikace se načte do vašeho fyzického zařízení
- Provádějte změny a sledujte aktualizace v reálném čase
- Testujte na více zařízeních současně
Osvědčený postup Testujte na zařízeních iOS i Android, abyste včas zachytili problémy specifické pro danou platformu.
Co jste vytvořili
- Mobilní aplikace pro více platforem (iOS a Android)
- Nativní navigace a gesta
- Integrace fotoaparátu a push notifikací
- Schopnost pracovat offline se synchronizací dat
- Podpora tmavého režimu
Další kroky
Aplikace založená na poloze
Přidejte do své mobilní aplikace GPS a mapy
Mobilní e-commerce
Vytvořte nákupní aplikaci s platbami
Jste připraveni vytvořit svou mobilní aplikaci?
Začněte vytvářet svou mobilní aplikaci pro více platforem ještě dnes.