Kuinka rakentaa sisäkkäinen laatikkovalikko React Native -sovelluksella

Ruudun tila on kallis hyödyke matkapuhelimissa. Laatikko valikko (tai ”hampurilainen valikko”) on yksi suosituimmista navigoinnin malleja, joiden avulla voit tallentaa sen samalla tarjota intuitiivinen navigointi. Tässä viestissä selvitän, kuinka sisäkkäinen (monitasoinen) laatikkovalikko rakennetaan React Native- ja React Navigation -toiminnoilla. ?

Kokeile live-esittelyä mobiililaitteella tai verkossa. ?

Navigointi React Native -sovelluksessa ⚛️

Navigointi muodostaa valtaosan tuotannolle rakennettujen sovellusten selkärangan. Navigoinnin ulkonäkö ja tunnelma ovat tärkeitä ajamisen ja sitoutumisen suhteen mobiilisovelluksissa.

Jos kuitenkin olet React Native -kehittäjä, navigointivalikon luomisesta ei ole selkeää mielipidettä. React Native suosittelee navigointiin joukko kirjastoja. Jokaisella on vahvuutensa tarpeistasi riippuen, mutta kaikissa käyttötapauksissa ei ole yhtä selkeää voittajaa.

Mikään navigointikirjastoista ei tällä hetkellä tue sisäkkäisiä laatikoita valmiina. Mutta yksi kirjastoista, joka tarjoaa monipuolisen sovellusliittymän mukautettujen ratkaisujen luomiseen, on React Navigation - JavaScript-pohjainen navigointi. React Native -yhteisö tukee sitä vahvasti ja ylläpitää sitä. Tätä aiomme käyttää tässä opetusohjelmassa.

Käyttötapa? ️

Minun piti rakentaa leikkipaikkasovellus esittelemään React Native -käyttöliittymän komponenttikirjasto. Se koostuu kahdeksasta eri komponentista, joista kukin tukee erilaisia ​​rekvisiittaa, ja yli 50 eri vaihtoehdosta.

Kaikkia laatikon sisällä olevia vaihtoehtoja ei ollut mahdollista näyttää kerralla ilman monitasoista laatikkoa, joka sisältäisi vaihtoehdot valitun komponentin perusteella. En löytänyt valmiita ratkaisuja tähän, joten minun piti rakentaa mukautettu ratkaisu.

Perusasetukset?

Oletusasetuksena oletan, että sinulla on jo React Native -projektiasetus joko CRNA: n, Expo Kitin tai React Native CLI: n kanssa. Varmista, että reaktionavigointikirjasto on asennettu joko langalla tai npm: llä. Aloitamme heti navigointisovellusliittymän avulla.

Voit vapaasti tarkistaa aloitusoppaan ennen jatkamista, jos et tunne React Navigation API -sovellusta.

Aloitamme esimerkistä, joka on samanlainen kuin React Navigationin DrawerNavigatorin virallisessa oppaassa. Luomme yksinkertaisen vetolaatikon, jossa on kaksi laatikkokohtaa: Koti ja Ilmoitukset.

Mukautettu laatikon sisältö

React Navigation -toiminnon avulla kaikki navigaattorit voivat tehdä paljon mukautuksia välittämällä navigaattorin kokoonpanon toiseksi parametriksi. Käytämme sitä renderöimään muuta mukautettua sisältöä kuin osakelokeron kohteita.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Välitämme contentComponentkokoonpanolle kutsutun ehdotuksen, jonka avulla voimme tehdä mukautetun sisällön laatikkoon. Käytämme joka näyttää ylä- ja alatunniste sekä vallitsevan DrawerItemsalkaen react-navigation.

Tämä saattaa avata monia asioita, jotka voidaan tehdä ohjaamalla mitä piirretään laatikon sisällä.

Näytön kartoituksen luominen

Meidän on rakennettava sisäkkäinen laatikko kullekin komponentille, jonka haluamme esitellä. Joten rekisteröidään ensin kaikki näytöt DrawerNavigator's Config -sovelluksessa. Olemme luoneet erillisen näytön kartoitustiedoston komponenteille. Sinulla voi hyvin olla oma käytäntönsä tai määritellä objekti, joka on samanlainen kuin aloitusnäytön komponentti.

Näytön kartoitus koostuu yksinkertaisista kohteista, joilla on näytön ominaisuuksia. screenMappingObjekti näyttää suunnilleen tältä:

Kun kaikki osat on rekisteröity, laatikko näyttää tältä:

Tämä tekisi kaikki komponentit ja niiden vaihtoehdot. Meillä on kaksi pääkomponenttia: DataSearch ja TextField. Jokaisella on vaihtoehtoja, kuten "Kuvakkeen sijainnilla", "Paikkamerkillä" ja paljon muuta. Tehtävämme on erottaa nämä vain komponenttiluetteloksi (DataSearch, TextField).

Ryhmittele ulompi laatikko

Malli, jota seurasin kartoituksessa, oli käyttää rajainta _ryhmittelemään vaihtoehdot yhdestä komponentista. Esimerkiksi navigointinäppäimet, joita käytin, olivat ”DataSearch_Basic” ja “DataSearch_With Icon Position”. Juuri tämä auttaa meitä yhdistämään yksittäisen komponentin, kuten DataSearchin, vaihtoehdot. Arvioimme kaikki komponentit, jotka meidän on näytettävä ulkolaatikolle.

Luomme util-toiminnon arvioidaksemme renderöitävät ulkoiset laatikkoluettelokohteet.

Tämä toiminto palauttaa objektin, jolla on ainutlaatuiset komponentit pääkomponenteille, kuten (DataSearch, TextField), jotka renderöidään näytöllä contentComponentmukautetun komponentin avulla. Ylläpidämme myös Boolean-arvoa laatikossa olevan sisällön määrittämiseksi tietyssä hetkessä.

Tämä renderMainDrawerComponenton vain komponentti-objektin näppäimillä toistuva toiminto. Se tekee räätälöidyt ulkoiset laatikkotuotteet, jotka on rakennettu yksinkertaisiksi Textja Viewreagoiviksi. Tarkista koko koodi täältä.

Tämä tekee laatikon näin:

Annetaanko lasten laatikko?

Nyt meidän on näytettävä vaihtoehdot napautettavan komponentin perusteella. Olet ehkä huomannut, että utils-ohjelmassa puretaan myös komponenttiryhmien alku- ja loppuindeksit erotinmallin perusteella.

Esimerkiksi, DataSearch näytöt alkavat indeksi 1 (indeksi on 0, Koti-näyttö) ja päät 3. TextField alkaa 3 ja päättyy 5. Käytämme näitä indeksejä maagisesti siivu items, joka johdetaan DrawerItemsperustuen valittuun komponenttiin ja sen indeksit.

Nyt, kun napautat DataSearchia, laatikko tuottaa jotain tällaista:

Olemme myös lisänneet sulavan takaisin-painikkeen, joka pohjimmiltaan vaihtaa totuusarvoa renderöimään päälokerot. Voit tarkistaa koko koodin täältä.

Ainoa asia, joka on jäljellä, on tehdä laatikon kohteista puhtaampia leikkaamalla turha komponentin nimi. Jälleen rikas React Navigation API on kätevä täällä.

Voimme välittää useita ominaisuuksia navigationOptions. Erityinen, jota aiomme käyttää täällä, on titlerekvisiitta näytön kartoituksella. Tämä antaa meidän poistaa osan ennen ensimmäistä erotinta. Joten "DataSearch_Basic" näkyy vain "Basic".

Siinä kaikki. Voimme lisätä niin monta haluamaasi kohdetta erotinmallin perusteella. Rakentamasi leikkikentäsovellus koostuu kahdeksasta pääkomponentista ja yli 53 vaihtoehdosta.

Tässä on linkki lopulliseen sovellukseen ja koodikantaan.

Yhteenveto?

  • Tukiaseman asetukset : DrawerNavigation hello world from docs.
  • Mukautettu laatikkosisältö : Tee laatikkotuotteita contentComponent.
  • Näytön kartoitus : Määritä ja rekisteröi kaikki laatikon komponentit.
  • Ryhmä ulompi vetolaatikko : Lue piirustuskuvio ryhmittelemään laatikon kohteet.
  • Lasten laatikon renderointi : Viipaloi ja hahmonna lapsen laatikon kohteita.

Päätelmä?

Opimme rakentamaan monitasoisen laatikkovalikon React Native -ohjelmalla. Käytimme React Navigation API -sovellusta mukauttamaan mukautetun sisältökomponentin laatikon sisälle, ja käytimme erotinkuviota näytön kartoitukseen. Käytä tätä mallia rakentaaksesi minkä tahansa tason pesinnän tai ehdollisen renderoinnin laatikoille.

Reaktiivinen haku?

Tarjoaa käyttöliittymäkomponentteja Native- ja Web-alustoille täydellisten hakukokemusten rakentamiseksi. Voit tarkistaa kaikki sen tarjoamat komponentit pelaamalla itse leikkisovelluksella tai luomalla oman komponentin.

appbaseio / reaktiivihaku

reaktiivihaku - React and React Native UI -komponenttikirjasto datapohjaisten sovellusten rakentamiseen github.com