Hogyan készítsünk beágyazott fiókmenüt a React Native segítségével

A képernyő tér értékes termék a mobilon. A fiók menü (vagy „hamburger menü”) az egyik legnépszerűbb navigációs minta, amely segít menteni, miközben intuitív navigációt kínál. Ebben a bejegyzésben bemutatom, hogyan építsünk be egy beágyazott (többszintű) fiókmenüt a React Native és a React Navigation használatával. ?

Próbálja ki az élő bemutatót mobilon vagy interneten. ?

Navigáció a React Native-ban ⚛️

A navigáció a gyártásra épített alkalmazások hatalmas többségének gerincét alkotja. A navigáció kinézete és hangulata fontos a vezetéshez és a mobilalkalmazásokban való elkötelezettséghez.

Ha azonban Ön a React Native fejlesztője, akkor nincs egyértelmű vélemény a navigációs menü felépítéséről. A React Native egy csomó könyvtárat ajánl a navigációhoz. Mindegyiknek megvan az ereje, az Ön igényeitől függően, de nincs egyértelmű nyertes az összes felhasználási esetre.

Jelenleg egyik navigációs könyvtár sem támogatja a beágyazott fiókokat a dobozból. De az egyik könyvtár, amely gazdag API-t kínál az egyedi megoldások elkészítéséhez, a React Navigation - egy JavaScript alapú navigáció. Erősen támogatja és fenntartja a React Native közösség. Ezt fogjuk használni ebben az oktatóanyagban.

A felhasználási eset? ️

Építenem kellett egy játszótér alkalmazást, hogy bemutassam a React Native felhasználói felületének összetevőit. Nyolc különböző alkatrészből áll, amelyek mindegyike különféle kellékeket támogat, és több mint 50 különböző lehetőségből áll.

Nem volt lehetséges egyszerre megjeleníteni az összes opciót a fiókban egy többszintű fiók nélkül, amely a választott komponens alapján lefedné az opciókat. Nem találtam erre kész megoldást, ezért létre kellett hoznom egy egyedi megoldást.

Alapbeállítás?

Az alapbeállításhoz feltételezem, hogy már van egy React Native projektbeállítása CRNA, Expo Kit vagy React Native CLI használatával. Győződjön meg arról, hogy telepítve van a reakció-navigációs könyvtár fonalakkal vagy npm-mel. Mindjárt a navigációs API használatával kezdjük.

Ha nem ismeri a React Navigation API-t, nyugodtan nézze át az indítási útmutatót a folytatás előtt.

Kezdjük egy hasonló példával, mint amely a React Navigation hivatalos DrawerNavigator útmutatójában található. Létrehozunk egy egyszerű fiókot, amelynek két fiókja van: Otthon és Értesítések.

Egyéni fióktartalom

A React Navigation lehetővé teszi az összes navigátor számára, hogy rengeteg testreszabást hajtson végre a navigátor konfigurációjának második paraméterként történő megadásával. A részvényfiók tételein kívül más egyedi tartalom megjelenítésére használjuk fel.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

A contentComponentkonfigurációnak meghívott javaslatot adunk át, amely lehetővé teszi számunkra, hogy egyedi tartalmat jelenítsünk meg a fiókban. Fogjuk használni, hogy mutatni a fejléc és a lábléc együtt az uralkodó DrawerItemsszármazó react-navigation.

Ez potenciálisan sok mindent felold, amit meg lehet tenni annak ellenőrzésével, hogy mit kell megjeleníteni a fiókban.

Képernyő leképezés létrehozása

Be kell építenünk egy beágyazott fiókot minden bemutatandó alkatrészhez. Tehát először regisztráljuk az összes képernyőt a DrawerNavigator Config alkalmazásában. Létrehoztunk egy külön képernyőtérkép fájlt az összetevők számára. Nagyon jól megalkothatja saját konvencióját, vagy meghatározhatja az objektumot, hasonlóan a kezdőképernyő összetevőjéhez.

A képernyő leképezés egyszerű, képernyő tulajdonságokkal rendelkező objektumokból áll. Az screenMappingobjektum így néz ki:

Az összes alkatrész regisztrálása után a fiók így néz ki:

Ez az összes komponenst megjelenítené az opciókkal együtt. Két fő összetevőnk van: DataSearch és TextField. Mindegyiknek vannak olyan opciói, mint „Ikonpozícióval”, „Helyőrzővel” és még sok más. Feladatunk ezek szétválasztása csak az összetevők listájára (DataSearch, TextField).

Külső fiók csoportosítása

A térképezés során követett minta az volt, hogy egy elválasztó _segítségével csoportosítottam az opciókat egy komponensből. Például az általam használt navigációs gombok a „DataSearch_Basic” és a „DataSearch_With Icon Position” voltak. Pontosan ez segít abban, hogy egyesítsük az egyetlen komponens, például a DataSearch opcióit. Egyedülállóan értékeljük az összes alkatrészt, amelyet meg kell mutatnunk a külső fióknál.

Létrehozunk egy util függvényt a megjelenítendő külső fióklista elemek értékeléséhez.

Ez a függvény egyedi összetevőket tartalmazó objektumot ad vissza a fő összetevőkhöz, például (DataSearch, TextField), amelyeket a képernyőn az contentComponentegyedi komponens segítségével megjelenítünk . Futtatunk egy logikai értéket is, hogy meghatározzuk a fiókban megjelenített tartalmat egy adott pillanatban.

Ez renderMainDrawerComponentcsak egy függvény, amely az összetevők objektumának kulcsain át ismétlődik. Az egyedi külső fiókokat egyszerűen Textés Viewa reaktív termékekből készíti. Itt ellenőrizheti a teljes kódot.

Ez a fiókot így alakítja:

Megmutatja a gyermek fiókját?

Most meg kell mutatnunk az opciókat a megérintett komponens alapján. Lehet, hogy észrevette, hogy az utils alkalmazásban az elválasztó mintázat alapján kivonjuk az összetevőcsoportok kezdő és befejező indexét is.

Például a DataSearch képernyők az 1-es indexnél kezdődnek (a 0 index a kezdőképernyő) és 3-ra végződnek. A TextField 3-tól kezdődik és 5-ig ér véget. Ezekkel az indexekkel varázslatosan szeleteljük a kiválasztott összetevő alapján itemstovábbított DrawerItemselemeket, és indexei.

A DataSearch megérintése után a fiók valami ilyesmi lesz:

Hozzáadtunk egy édes Vissza gombot is, amely alapvetően átkapcsol egy logikai értékre a fiókos elemek megjelenítéséhez. A teljes kódot itt ellenőrizheti.

Most csak annyit kell tennie, hogy a fiók elemei tisztábbá váljanak a redundáns alkatrésznév levágásával. Ismét jól jön a gazdag React Navigation API.

Különböző tulajdonságokkal rendelkezhetünk navigationOptions. Egy konkrét, amelyet itt fogunk használni, a titletámasz a képernyő leképezésével. Ezzel eltávolíthatjuk az alkatrészt az első elválasztó előtt. Tehát a „DataSearch_Basic” csak „Basic” -ként jelenik meg.

Ez minden. Hozzáadhatunk annyi elemet, amennyit csak akarunk, az elválasztó minta alapján. Az általunk épített játszótér-alkalmazás nyolc fő alkatrészből és több mint 53 opcióból áll.

Itt található a link a végső alkalmazásra és a kódbázisra.

Összegzés?

  • Bázis beállítás : DrawerNavigation helló világ docs.
  • Egyéni fióktartalom : A fiókokat renderelheti contentComponent.
  • Képernyő leképezés : Adja meg és regisztrálja az összes fiók összetevőt.
  • Csoport külső fiók : Olvassa el az elválasztó mintát a fiók elemeinek csoportosításához.
  • Gyerekfiók renderelése : Szeletelje és renderelje a gyermek fiók fiókjait.

Következtetés?

Megtanultunk egy többszintű fiókmenüt felépíteni a React Native segítségével. A React Navigation API-t használtuk egy egyedi tartalomkomponens renderelésére a fiókban, a határoló mintát pedig a képernyő leképezéséhez. Ezzel a mintával bármilyen szintű fészkelést vagy feltételes renderelést készíthet a fiókok számára.

ReaktívKeresés?

A Native és a Web platform felhasználói felületének összetevőit biztosítja a tökéletes keresési élmények kialakításához. Ellenőrizheti az összes általa kínált összetevőt, ha játszik a játszótér alkalmazással, vagy létrehozza saját alkatrészét.

appbaseio / reaktív keresés

reaktív keresés - React és React Native UI komponensek könyvtár adatközpontú alkalmazások készítéséhez github.com