React Native Menü
In diesem Tutorial zeige ich wie man in React Native ein Menü hinzufügt. Über ein Menü lassen sich die einzelnen Seiten der Applikation recht einfach ansteuern. Mit einer gut konfigurier- und stylebaren Menükomponente findet man für jede denkbare App die passende Lösung.
React Native Menü
Ich verwende für meine App das React Native Material Menu, ein Open Source Projekt. Der Link führt zum GitHub Projekt mit detaillierter Anleitung, das NPM installiert man für das Projekt wie folgt:
npm i -s react-native-material-menu
Im Projekt erstellt man am besten für das Menü eine eigene Komponente. Benötigt man mehrere unterschiedliche Menüs, dann erstellt man mehrere oder eine stark konfigurierbare Komponente. Für meine App reicht ein Menü. Der Code sieht in etwa wie folgt aus:
Das Menü hat einen Status: sichtbar oder nicht sichtbar. Dieses wird über den Status isVisible getriggert und über die beiden hideMenu und showMenu Callback funktionen geändert. Per default ist das Menü unsichtbar. Unsichtbar heißt aber, es muss ein Symbol oder Anker geben über das man das Menü öffnen kann. Diesen Anker (anchor) definiert man im Menu Tag. In meinem Fall wir das bekannte Hamburger Symbold (3 Balken übereinander) oder falls mit übergeben ein Text angezeigt.
Der Body des Menü Tags sind die einzelnen Menüelemente. Diese sind hard coded definiert. Jedes Element hat neben einer onPress funktion in der auf die Zielseite navigiert wird noch einen Text und Stil. In der kompilierten App siet das auf Android nun so aus:
Die App zeigt das gewohnte Menüsymbol und über einen Klick darauf öffnet sich das Menü mit den definierten Menüpunkten. Die Menükomponente lässt sich dann auf jeder Seite oder in einer zentralen Komponente wie eine Titelliste einfügen.
Fazit
Mit sehr wenig Aufwand lassen sich in React Native Menüs definieren und in die App einfügen. Die Komponenten sind stark konfigurierbar, weshlab man das Menü sowol inhaltlich als auch grafisch an die Bedürfnisse anpassen kann.
