Kako izraditi ugniježđeni izbornik ladica s React Native

Prostor na ekranu dragocjena je roba na mobitelu. Izbornik ladica (ili "izbornik hamburgera") jedan je od najpopularnijih uzoraka navigacije koji vam pomaže spremiti ga, a istovremeno nudi intuitivnu navigaciju. U ovom postu ću demistificirati kako izraditi ugniježđeni izbornik ladica (više razina) pomoću React Native i React Navigation. ?

Isprobajte demonstraciju uživo na mobilnom uređaju ? Ili na webu. ?

Navigacija u React Native-u ⚛️

Navigacija čini okosnicu velike većine aplikacija napravljenih za proizvodnju. Izgled i osjećaj navigacije važan je za vožnju i angažman u mobilnim aplikacijama.

Međutim, ako ste React Native programer, nema jasnog mišljenja kada je u pitanju izgradnja navigacijskog izbornika. React Native preporučuje hrpu knjižnica za navigaciju. Svaka ima svoju snagu, ovisno o vašim potrebama, ali nema jasnog pobjednika za sve slučajeve upotrebe.

Nijedna od navigacijskih knjižnica trenutačno ne podržava ugniježđene ladice. No, jedna od knjižnica koja nudi bogati API za izgradnju prilagođenih rješenja je React Navigation - navigacija zasnovana na JavaScriptu. To snažno podupire i održava zajednica React Native. To je ono što ćemo koristiti u ovom vodiču.

Slučaj upotrebe? ️

Morao sam izgraditi aplikaciju za igralište kako bih predstavio biblioteku komponenata korisničkog sučelja za React Native. Sastoji se od osam različitih komponenata, od kojih svaka podržava razne rekvizite, i više od 50 različitih opcija.

Nije bilo moguće istovremeno prikazati sve opcije u ladici bez ladice na više razina koja bi obuhvaćala opcije na temelju odabrane komponente. Nisam uspio pronaći gotovo rješenje za to, pa sam morao izraditi prilagođeno.

Osnovno postavljanje?

Za osnovno postavljanje pretpostavljam da već imate postavke React Native projekta s CRNA-om, Expo Kitom ili React Native CLI-jem. Obavezno instalirajte knjižnicu za reakcijsku navigaciju s pređom ili npm. Krenut ćemo odmah s korištenjem navigacijskog API-ja.

Slobodno provjerite vodič za početak prije nego što nastavite ako niste upoznati s React Navigation API-jem.

Započet ćemo s primjerom sličnim onom koji je dokumentiran u službenom vodiču React Navigation DrawerNavigator. Stvorit ćemo jednostavnu ladicu koja ima dvije stavke ladice: Početna i Obavijesti.

Prilagođeni sadržaj ladice

React Navigation omogućuje svim navigatorima da izvrše mnoga prilagođavanja prosljeđivanjem konfiguracije navigatora kao drugog parametra. Upotrijebit ćemo ga za prikazivanje nekog prilagođenog sadržaja osim stavki u ladici.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Proslijedit ćemo oslonac pozvan contentComponentu config koji će nam omogućiti da prikažemo prilagođeni sadržaj za ladicu. Upotrijebit ćemo to za prikaz zaglavlja i podnožja zajedno s prevladavajućim DrawerItemsiz react-navigation.

Ovo potencijalno otključava puno stvari koje se mogu učiniti kontroliranjem onoga što će se prikazati u ladici.

Izrada mapiranja zaslona

Moramo izraditi ugniježđenu ladicu za svaku komponentu koju želimo prikazati. Dakle, hajde da prvo registriramo sve zaslone pomoću programa DrawerNavigator's Config. Izradili smo zasebnu datoteku za mapiranje zaslona za komponente. Vrlo dobro možete postići vlastiti dogovor ili definirati objekt izravno sličan komponenti početnog zaslona.

Mapiranje zaslona sastoji se od jednostavnih objekata sa svojstvom zaslona. screenMappingObjekt izgleda ovako:

Nakon registracije svih komponenti, ladica bi izgledala otprilike ovako:

To bi prikazalo sve komponente zajedno s njihovim opcijama. Imamo dvije glavne komponente: DataSearch i TextField. Svaka ima opcije poput "S položajem ikone", "S rezerviranim mjestom" i još mnogo toga. Naš je zadatak razdvojiti ih na popis samo komponenata (DataSearch, TextField).

Grupiranje vanjske ladice

Uzorak koji sam slijedio u mapiranju bio je korištenje graničnika _za grupiranje opcija iz jedne komponente. Na primjer, navigacijske tipke koje sam koristio bile su "DataSearch_Basic" i "DataSearch_With Position Icon". To je upravo ono što će nam pomoći da kombiniramo opcije za jednu komponentu kao što je DataSearch. Jedinstveno ćemo procijeniti sve komponente koje moramo pokazati za vanjsku ladicu.

Stvorit ćemo uslužnu funkciju za procjenu stavki popisa vanjskih ladica koje će se prikazati.

Ova će funkcija vratiti objekt s jedinstvenim komponentama za glavne komponente poput (DataSearch, TextField) koje ćemo prikazati na zaslonu uz pomoć contentComponentprilagođene komponente. Također ćemo održavati logičku vrijednost da bismo odredili sadržaj koji se u ladici prikazuje u određenom trenutku.

To renderMainDrawerComponentje samo funkcija koja se ponavlja kroz tipke objekta komponenata. Omogućuje prilagođene vanjske ladice izrađene na vrhu jednostavno Texti Viewodreagirano. Potpuni kod provjerite ovdje.

To će ladicu prikazati ovako:

Renderiranje dječje ladice?

Sada moramo pokazati opcije na temelju komponente koja se tapka. Možda ste primijetili da u utils također izvlačimo indekse početka i kraja grupa komponenata na temelju uzorka graničnika.

Na primjer, DataSearch zasloni počinju s indeksom 1 (indeks 0 je Početni zaslon) i završava s 3. TextField započinje s 3 i završava u 5. Koristit ćemo ove indekse za čarobno rezanje onih itemskoji se prosljeđuju na DrawerItemstemelju odabrane komponente i njegovi indeksi.

Sada, nakon što dodirnete DataSearch, ladica će preći u nešto poput ovoga:

Dodali smo i slatki gumb za povratak koji u osnovi prebacuje logičku vrijednost kako bi prikazao glavne stavke ladice. Cijeli kod možete provjeriti ovdje.

Sada je preostalo samo učiniti predmete ladica izgledajući čišće obrezujući suvišni naziv komponente. Opet, bogati API za reakcijsku navigaciju ovdje dobro dolazi.

Postoje razna svojstva s kojima možemo proći navigationOptions. Određeni koji ćemo ovdje upotrijebiti je titleoslonac s mapiranjem zaslona. Tako ćemo ukloniti dio prije prvog graničnika. Dakle, "DataSearch_Basic" prikazat će se samo kao "Basic".

To je sve. Na temelju uzorka graničnika možemo dodati što više stavki. Aplikacija za igralište koju smo izgradili sastoji se od osam glavnih komponenata i preko 53 ukupne mogućnosti.

Evo veze do konačne aplikacije i baze kodova.

Sažetak ?

  • Osnovno postavljanje : DrawerNavigation hello world iz dokumenata.
  • Prilagođeni sadržaj ladice : Predmete ladice prikažite s contentComponent.
  • Mapiranje zaslona : Definirajte i registrirajte sve komponente ladica.
  • Grupiraj vanjsku ladicu : Očitajte graničnik kako biste grupirali stavke ladice.
  • Prikazivanje podređene ladice : Narežite i prikažite podređene predmete ladice.

Zaključak?

Naučili smo graditi izbornik ladica na više razina s React Native. Koristili smo React Navigation API za generiranje prilagođene komponente sadržaja unutar ladice, a za preslikavanje zaslona koristili smo uzorak graničnika. Koristite ovaj obrazac za izgradnju bilo koje razine gniježđenja ili uvjetnog prikaza za ladice.

ReactiveSearch?

Pruža komponente korisničkog sučelja za izvornu i web platformu za izgradnju savršenog iskustva pretraživanja. Sve komponente koje nudi možete provjeriti igranjem sa samom aplikacijom igrališta ili izradom vlastite komponente.

appbaseio / reactivesearch

reactivesearch - Knjižnica komponenata React and React Native UI za izgradnju aplikacija na temelju podataka github.com