Sådan oprettes en indbygget skuffemenu med React Native

Skærmplads er en dyrebar vare på mobil. Den skuffe menu (eller ”hamburger menuen”) er en af de mest populære navigation mønstre, der hjælper dig gemme det samtidig tilbyde intuitiv navigation. I dette indlæg vil jeg afmystificere, hvordan man bygger en indlejret (multi-level) skuffemenu ved hjælp af React Native og React Navigation. ?

Prøv live demo på mobil ? Eller på nettet. ?

Navigation i React Native ⚛️

Navigation udgør rygraden i et stort flertal af apps, der er bygget til produktion. Navigationsudseende og -følelse er vigtig for at skabe brug og engagement i mobilapps.

Men hvis du er React Native-udvikler, er der ikke en klar mening, når det kommer til at opbygge en navigationsmenu. React Native anbefaler en masse biblioteker til navigation. Hver har sin styrke, afhængigt af dine behov, men der er ingen klar vinder til alle brugssager.

Ingen af ​​navigationsbibliotekerne understøtter i øjeblikket indlejrede skuffer uden for kassen. Men et af bibliotekerne, der tilbyder en rig API til at oprette tilpassede løsninger, er React Navigation - en JavaScript-baseret navigation. Det understøttes og vedligeholdes stærkt af React Native-samfundet. Dette er hvad vi skal bruge i denne vejledning.

Brugssagen? ️

Jeg var nødt til at bygge en legepladsapp for at fremvise et UI-komponentbibliotek til React Native. Den består af otte forskellige komponenter, der hver understøtter forskellige rekvisitter og mere end 50 forskellige muligheder.

Det var ikke muligt at vise alle indstillinger inde i skuffen på én gang uden en skuffe i flere niveauer, der ville omfatte mulighederne baseret på den valgte komponent. Jeg kunne ikke finde en færdiglavet løsning til dette, så jeg havde brug for at oprette en brugerdefineret løsning.

Base opsætning?

Til basisopsætningen antager jeg, at du allerede har en React Native-projektopsætning med enten CRNA, Expo Kit eller React Native CLI. Sørg for, at du har reaktornavigationsbiblioteket installeret med enten garn eller npm. Vi starter med det samme med at bruge navigations-API'en.

Du er velkommen til at tjekke startvejledningen, inden du fortsætter, hvis du ikke er bekendt med React Navigation API.

Vi starter med et eksempel svarende til det, der er dokumenteret i React Navigations officielle guide til DrawerNavigator. Vi opretter en simpel skuffe, der har to skuffeartikler: Hjem og meddelelser.

Tilpasset skuffeindhold

React Navigation gør det muligt for alle navigatorer at foretage mange tilpasninger ved at sende en navigatorkonfiguration som den anden parameter. Vi bruger det til at gengive noget brugerdefineret indhold bortset fra lagerskuffeemnerne.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Vi sender en prop kaldet contentComponenttil konfigurationen, som giver os mulighed for at gengive brugerdefineret indhold til skuffen. Vi bruger det til at vise et sidehoved og en sidefod sammen med den fremherskende DrawerItemsfra react-navigation.

Dette låser potentielt op for mange ting, der kan gøres ved at kontrollere, hvad der skal gengives inde i skuffen.

Oprettelse af skærmkortlægning

Vi skal bygge en indbygget skuffe til hver komponent, som vi vil fremvise. Så lad os først registrere alle skærmene med DrawerNavigator's Config. Vi har oprettet en separat skærmkortfil for komponenter. Du kan meget vel have din egen konvention eller definere objektet, der direkte svarer til komponenten på startskærmen.

Skærmkortlægningen består af enkle objekter med skærmegenskaber. Det screenMappingobjekt ser nogenlunde sådan her:

Efter registrering af alle komponenter vil skuffen se sådan ud:

Dette ville gengive alle komponenter sammen med deres muligheder. Vi har to hovedkomponenter: DataSearch og TextField. Hver har muligheder som "Med ikonposition", "Med pladsholder" og mere. Vores opgave er at adskille disse i en liste over kun komponenter (DataSearch, TextField).

Gruppering af ydre skuffe

Et mønster, jeg fulgte i kortlægningen, var at bruge en afgrænser _til at gruppere indstillinger fra en komponent. For eksempel var de navigeringstaster, jeg brugte, "DataSearch_Basic" og "DataSearch_With Icon Position". Dette er præcis, hvad der vil hjælpe os med at kombinere mulighederne for en enkelt komponent som DataSearch. Vi evaluerer entydigt alle de komponenter, vi har brug for til den ydre skuffe.

Vi opretter en util-funktion til at evaluere de ydre skuffelisteelementer, der skal gengives.

Denne funktion returnerer et objekt med unikke komponenter til hovedkomponenterne som (DataSearch, TextField), som vi gengiver på skærmen ved hjælp af den contentComponentbrugerdefinerede komponent. Vi opretholder også en boolsk for at bestemme indholdet, der gengives på skuffen på et bestemt tidspunkt.

Det renderMainDrawerComponenter bare en funktion, der gentager sig over nøglerne til komponentobjektet. Det gengiver brugerdefinerede ydre skuffeartikler bygget oven på simpelt Textog Viewfra reageret. Tjek den fulde kode her.

Dette gengiver skuffen sådan:

Gør barneskuffen?

Nu skal vi vise indstillingerne baseret på den komponent, der tappes. Du har måske bemærket, at vi i værktøjer også udtrækker start- og slutindekserne for komponentgrupperne baseret på afgrænsningsmønsteret.

For eksempel starter datasøgningsskærme ved indeks 1 (indeks 0 er startskærm) og slutter ved 3. TextField starter ved 3 og slutter ved 5. Vi bruger disse indekser til magisk at skære det items, der sendes til, DrawerItemsbaseret på den valgte komponent og dets indekser.

Efter at have tappet på DataSearch, skuffer nu til noget som dette:

Vi har også tilføjet en sød tilbage-knap, der grundlæggende skifter en boolsk for at gengive de vigtigste skuffeartikler. Du kan tjekke den fulde kode her.

Nu er det eneste, der er tilbage, at få skuffeartiklerne til at se renere ud ved at trimme det overflødige komponentnavn. Igen er den rige React Navigation API praktisk her.

Der er forskellige egenskaber, vi kan passere med navigationOptions. En bestemt, vi skal bruge her, er titleprop med skærmkortlægning. Dette vil lade os fjerne delen før den første afgrænser. Så "DataSearch_Basic" vises kun som "Basic".

Det er alt. Vi kan tilføje så mange emner, vi ønsker, baseret på afgrænsningsmønsteret. Legepladsappen, vi har bygget, består af otte hovedkomponenter og over 53 muligheder i alt.

Her er linket til den endelige app og codebase.

Resumé ?

  • Base opsætning : DrawerNavigation hej verden fra docs.
  • Tilpasset skuffeindhold : Gengiv skuffeartikler med contentComponent.
  • Skærmkortlægning : Definer og registrer alle skuffekomponenter.
  • Gruppér den ydre skuffe : Læs skillemønsteret for at gruppere skuffeartikler.
  • Gengivelse af børneskuffe : Skær og gengiv børneskuffer.

Konklusion?

Vi lærte at oprette en skuffemenu på flere niveauer med React Native. Vi brugte React Navigation API til at gengive en brugerdefineret indholdskomponent inde i skuffen og brugte afgrænsningsmønsteret til skærmkortlægning. Brug dette mønster til at opbygge ethvert niveau af indlejring eller betinget gengivelse for skuffer.

Reaktiv søgning?

Tilbyder UI-komponenter til Native og Web-platform til opbygning af perfekte søgeoplevelser. Du kan kontrollere alle de komponenter, den tilbyder, ved at lege med selve legepladsappen eller ved at oprette din egen komponent.

appbaseio / reaktiv søgning

reactivesearch - Et React and React Native UI-komponentbibliotek til opbygning af datadrevne apps github.com