Oppaat
- Aloitusopas
- First Project
- Verkkosovellukset
- Mobiilisovellukset
- 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
Opit seuraavat asiat:
- React Native -projektin määritys
- Monialustaiset käyttöliittymäkomponentit
- Navigointi ja reititys
- Laitteen natiiviominaisuudet
- Sovelluskauppaan julkaisun valmistelu
Monialustainen mobiilisovellus React Native -tekniikalla
Rakenna sovellus, joka toimii sekä iOS- että Android-laitteilla yhdestä koodipohjasta
React Native mahdollistaa mobiilisovellusten rakentamisen sekä iOS- että Android-laitteille yhdellä koodipohjalla. Tässä oppaassa ZBuild luo täydellisen mobiilisovelluksen, joka toimii natiivisti molemmilla alustoilla.
Yksi koodipohja, kaksi alustaa. Julkaise molempiin sovelluskauppoihin yhdestä projektista.
Esivaatimukset
- ZBuild Studio -tili
- React-perusteiden osaaminen on hyödyksi, mutta ei välttämätöntä
- Expo Go -sovellus puhelimessasi testausta varten
Projektin yleiskatsaus
Rakennamme tehtävienhallintasovelluksen, jossa on seuraavat mobiilioptimoidut ominaisuudet:
Natiivi navigointi
Välilehtipalkki, pino-navigointi, modaali-ikkunat
Eleiden tuki
Pyyhkäisy poistaaksesi, vedä päivittääksesi
Push-ilmoitukset
Muistutukset tulevista tehtävistä
Offline-tuki
Toimii ilman internetyhteyttä
Kameraintegraatio
Liitä kuvia tehtäviin
Tumma tila
Automaattinen teeman vaihto
Vaihe 1: Määrittele mobiilisovelluksesi
Kuvaile mobiilisovelluksesi Conductor-työkalulle huomioiden alustakohtaiset ominaisuudet.
Haluan rakentaa tehtävienhallintasovelluksen.
Ominaisuudet:
- Tehtävälistat kategorioilla
- Eräpäivät ja push-ilmoitusmuistutukset
- Kuvaliitteet kameralla tai galleriasta
- Pyyhkäisyeleet (pyyhkäise suorittaaksesi, pyyhkäise poistaaksesi)
- Vedä päivittääksesi
- Offline-tila ja synkronointi verkkoyhteyden palatessa
- Tumman tilan tuki
Navigointi:
- Alapalkki (Tehtävät, Kalenteri, Asetukset)
- Pino-navigointi jokaisen välilehden sisällä
Alustat: iOS ja Android
Kehitysympäristö: React Native ja ExpoVaihe 2: Natiivikomponentit
Virtuoso luo alustalle sopivia komponentteja, jotka tuntuvat natiiveilta jokaisella alustalla.
iOS-tyylinen käyttöliittymä
San Francisco -fontti, iOS-navigointimallit
Android-tyylinen käyttöliittymä
Material Design -elementit, Android-navigointi
Mukautuvat asettelut
Säätyy eri näyttökokoihin
Turva-alueet
Huomioi lovet ja kotipainikkeen ilmaisimet
Vaihe 3: Laitteen ominaisuudet
Käytä laitteen natiiviominaisuuksia React Native -siltojen kautta.
- Kameran ja kuvakirjaston käyttöoikeus
- Push-ilmoitusten määritys
- Paikallinen tallennus AsyncStorage-työkalulla
- Haptinen palaute vuorovaikutuksessa
- Biometrinen tunnistautumisvaihtoehto
Vaihe 4: Testaaminen laitteella
Testaa sovellustasi oikeilla laitteilla Expo Go -sovelluksen avulla.
- Skannaa QR-koodi Expo Go -sovelluksella
- Sovellus latautuu fyysiseen laitteeseesi
- Tee muutoksia ja näe päivitykset livenä
- Testaa useilla laitteilla samanaikaisesti
Paras käytäntö Testaa sekä iOS- että Android-laitteilla havaitaksesi alustakohtaiset ongelmat ajoissa.
Mitä olet rakentanut
- Monialustainen mobiilisovellus (iOS & Android)
- Natiivi navigointi ja eleet
- Kamera- ja push-ilmoitusintegraatio
- Offline-valmius ja tietojen synkronointi
- Tumman tilan tuki
Seuraavat vaiheet
Sijaintipohjainen sovellus
Lisää GPS ja kartat mobiilisovellukseesi
Mobiili verkkokauppa
Rakenna ostossovellus maksuominaisuuksilla
Oletko valmis rakentamaan mobiilisovelluksesi?
Aloita monialustaisen mobiilisovelluksesi rakentaminen jo tänään.