So erstellen Sie mit React Native ein verschachteltes Schubladenmenü

Bildschirmfläche ist ein kostbares Gut auf Mobilgeräten. Das Schubladenmenü (oder „Hamburgermenü“) ist eines der beliebtesten Navigationsmuster, mit dem Sie es speichern und gleichzeitig eine intuitive Navigation anbieten können. In diesem Beitrag werde ich entmystifizieren, wie ein verschachteltes (mehrstufiges) Schubladenmenü mit React Native und React Navigation erstellt wird. ?

Probieren Sie die Live-Demo auf dem Handy oder im Internet aus. ?

Navigation in React Native ⚛️

Die Navigation bildet das Rückgrat einer großen Mehrheit der für die Produktion entwickelten Apps. Das Erscheinungsbild der Navigation ist wichtig für die Nutzung und das Engagement in mobilen Apps.

Wenn Sie jedoch ein React Native-Entwickler sind, gibt es keine klare Meinung zum Erstellen eines Navigationsmenüs. React Native empfiehlt eine Reihe von Bibliotheken für die Navigation. Jedes hat seine Stärke, abhängig von Ihren Anforderungen, aber es gibt keinen eindeutigen Gewinner für alle Anwendungsfälle.

Keine der Navigationsbibliotheken unterstützt derzeit sofort verschachtelte Schubladen. Eine der Bibliotheken, die eine umfangreiche API zum Erstellen benutzerdefinierter Lösungen bietet, ist React Navigation - eine JavaScript-basierte Navigation. Es wird stark von der React Native Community unterstützt und gepflegt. Dies wird in diesem Tutorial verwendet.

Der Anwendungsfall? ️

Ich musste eine Spielplatz-App erstellen, um eine UI-Komponentenbibliothek für React Native zu präsentieren. Es besteht aus acht verschiedenen Komponenten, die jeweils verschiedene Requisiten unterstützen, und mehr als 50 verschiedenen Optionen.

Es war nicht möglich, alle Optionen in der Schublade gleichzeitig anzuzeigen, ohne eine mehrstufige Schublade, die die Optionen basierend auf der ausgewählten Komponente erweitert. Ich konnte keine fertige Lösung dafür finden, also musste ich eine benutzerdefinierte erstellen.

Basis-Setup?

Für das Basis-Setup gehe ich davon aus, dass Sie bereits ein React Native-Projekt-Setup mit CRNA, Expo Kit oder React Native CLI haben. Stellen Sie sicher, dass Sie die React-Navigation-Bibliothek entweder mit Garn oder npm installiert haben. Wir beginnen sofort mit der Verwendung der Navigations-API.

Wenn Sie mit der React Navigation-API nicht vertraut sind, lesen Sie bitte die Kurzanleitung, bevor Sie fortfahren.

Wir beginnen mit einem Beispiel ähnlich dem, das im offiziellen DrawerNavigator-Handbuch von React Navigation dokumentiert ist. Wir erstellen eine einfache Schublade mit zwei Schubladenelementen: Startseite und Benachrichtigungen.

Benutzerdefinierter Schubladeninhalt

Mit React Navigation können alle Navigatoren viele Anpassungen vornehmen, indem sie eine Navigatorkonfiguration als zweiten Parameter übergeben. Wir werden es verwenden, um andere benutzerdefinierte Inhalte als die Artikel in der Schublade zu rendern.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Wir werden eine Requisite contentComponentan die Konfiguration übergeben, mit der wir benutzerdefinierte Inhalte für die Schublade rendern können. Wir werden das verwenden, um eine Kopf- und Fußzeile zusammen mit der vorherrschenden DrawerItemsvon anzuzeigen react-navigation.

Dadurch werden möglicherweise viele Dinge freigeschaltet, die durch Steuern der Darstellung in der Schublade ausgeführt werden können.

Bildschirmzuordnung erstellen

Wir müssen für jede Komponente, die wir präsentieren möchten, eine verschachtelte Schublade erstellen. Registrieren wir also zuerst alle Bildschirme in der DrawerNavigator-Konfiguration. Wir haben eine separate Bildschirmzuordnungsdatei für Komponenten erstellt. Sie können sehr gut Ihre eigene Konvention haben oder das Objekt direkt ähnlich der Startbildschirmkomponente definieren.

Die Bildschirmzuordnung besteht aus einfachen Objekten mit Bildschirmeigenschaft. Das screenMappingObjekt sieht ungefähr so ​​aus:

Nach der Registrierung aller Komponenten würde die Schublade ungefähr so ​​aussehen:

Dies würde alle Komponenten zusammen mit ihren Optionen rendern. Wir haben zwei Hauptkomponenten: DataSearch und TextField. Jedes hat Optionen wie "Mit Symbolposition", "Mit Platzhalter" und mehr. Unsere Aufgabe ist es, diese in eine Liste nur von Komponenten (DataSearch, TextField) zu trennen.

Gruppieren der äußeren Schublade

Ein Muster, dem ich bei der Zuordnung folgte, bestand darin, ein Trennzeichen _zu verwenden, um Optionen aus einer Komponente zusammenzufassen. Die von mir verwendeten Navigationstasten waren beispielsweise "DataSearch_Basic" und "DataSearch_With Icon Position". Genau dies wird uns helfen, die Optionen für eine einzelne Komponente wie DataSearch zu kombinieren. Wir werden alle Komponenten, die wir für die äußere Schublade zeigen müssen, eindeutig bewerten.

Wir erstellen eine Util-Funktion, um die zu rendernden Elemente der äußeren Schubladenliste auszuwerten.

Diese Funktion gibt ein Objekt mit eindeutigen Komponenten für die Hauptkomponenten wie (DataSearch, TextField) zurück, die mithilfe der contentComponentbenutzerdefinierten Komponente auf dem Bildschirm gerendert werden. Wir werden auch einen Booleschen Wert beibehalten , um den Inhalt zu bestimmen, der zu einem bestimmten Zeitpunkt in der Schublade gerendert wird.

Das renderMainDrawerComponentist nur eine Funktion der Tasten des Komponenten - Objekt iterieren. Es rendert benutzerdefinierte äußere Schubladenelemente, die einfach Textund Viewreaktionsbasiert aufgebaut sind. Überprüfen Sie den vollständigen Code hier.

Dadurch wird die Schublade wie folgt dargestellt:

Kinderschublade rendern?

Jetzt müssen wir die Optionen basierend auf der Komponente anzeigen, auf die getippt wird. Möglicherweise haben Sie bemerkt, dass wir in Utils auch die Start- und Endindizes der Komponentengruppen basierend auf dem Trennzeichenmuster extrahieren.

Zum Beispiel DataSearch Bildschirm bei Index 1 beginnen (Index 0 ist Home - Bildschirm) und endet am 3. TextField- beginnt bei 3 und endet an 5. Wir werden diese Indizes verwenden , um auf magische Weise der Scheibe , itemsdie vergangen ist , um DrawerItemsauf der Grundlage der ausgewählten Komponente und seine Indizes.

Nachdem Sie auf DataSearch getippt haben, wird die Schublade ungefähr so ​​aussehen:

Wir haben auch einen Sweet-Back-Button hinzugefügt, der im Grunde einen Booleschen Wert umschaltet, um die Hauptschubladenelemente zu rendern. Den vollständigen Code können Sie hier überprüfen.

Jetzt müssen Sie nur noch die Schubladenelemente sauberer aussehen lassen, indem Sie den redundanten Komponentennamen kürzen. Auch hier ist die umfangreiche React Navigation API nützlich.

Es gibt verschiedene Eigenschaften, mit denen wir weitergeben können navigationOptions. Eine besondere, die wir hier verwenden werden, ist die titleRequisite mit der Bildschirmzuordnung. Dadurch können wir das Teil vor dem ersten Trennzeichen entfernen. "DataSearch_Basic" wird also nur als "Basic" angezeigt.

Das ist alles. Wir können basierend auf dem Begrenzungsmuster so viele Elemente hinzufügen, wie wir möchten. Die von uns erstellte Spielplatz-App besteht aus acht Hauptkomponenten und insgesamt über 53 Optionen.

Hier ist der Link zur endgültigen App und zur Codebasis.

Zusammenfassung ?

  • Basis-Setup : DrawerNavigation Hallo Welt aus Dokumenten.
  • Benutzerdefinierter Schubladeninhalt : Schubladenelemente mit rendern contentComponent.
  • Bildschirmzuordnung : Definieren und registrieren Sie alle Schubladenkomponenten.
  • Äußere Schublade gruppieren: Lesen Sie das Begrenzungsmuster, um Schubladenelemente zu gruppieren.
  • Kinderschublade rendern: Schneiden und rendern Sie Kinderschubladenelemente.

Fazit ?

Wir haben gelernt, mit React Native ein mehrstufiges Schubladenmenü zu erstellen. Wir haben die React Navigation API verwendet, um eine benutzerdefinierte Inhaltskomponente in der Schublade zu rendern, und das Trennzeichenmuster für die Bildschirmzuordnung verwendet. Verwenden Sie dieses Muster, um eine beliebige Ebene der Verschachtelung oder des bedingten Renderns für Schubladen zu erstellen.

ReactiveSearch?

Bietet UI-Komponenten für Native und Webplattform, um perfekte Sucherlebnisse zu erzielen. Sie können alle angebotenen Komponenten überprüfen, indem Sie mit der Spielplatz-App selbst spielen oder eine eigene Komponente erstellen.

appbaseio / reactivesearch

Reaktivive Suche - Eine native UI-Komponentenbibliothek zum Erstellen datengesteuerter Apps github.com