Erstgespräch

Tab Bar / Drawer Navigation / Layout

2 Min. Lesezeit App-Oberfläche

Die Navigation in einer mobilen App ist das System, mit dem Nutzer zwischen verschiedenen Bereichen oder Seiten wechseln können. Zu den gängigsten Navigationstypen gehören:

  • Tab Bar: Eine untere Leiste mit Icons/Text, über die Nutzer schnell zwischen Hauptbereichen wechseln können (z. B. „Start“, „Suche“, „Profil“)
  • Drawer Navigation: Ein ausklappbares Seitenmenü, meist per Wisch von links geöffnet, mit einer Liste aller App-Inhalte
  • Layout: Die visuelle und strukturelle Anordnung von Navigation, Headern, Inhalten und Footer-Bereichen Eine gute Navigation sorgt für Orientierung, Übersicht und Benutzerfreundlichkeit – besonders bei Apps mit vielen Funktionen.

🔧 Technische Erklärung

In Expo-basierten React Native Apps wird Navigation meist mit React Navigation umgesetzt – dem Standard-Toolkit für komplexe Navigationsstrukturen.

Hauptkomponenten von React Navigation:

  1. createBottomTabNavigator()
    • Für die Tab Bar unten
    • Ideal für 3–5 gleichwertige Hauptbereiche
    • Unterstützt Icons, Labels, aktive Zustände
  2. createDrawerNavigator()
    • Für das seitliche Menü
    • Ideal für Apps mit vielen Kategorien oder weniger häufig genutzten Bereichen
    • Anpassbar mit Profilbild, Gruppen, Dark Mode
  3. createStackNavigator()
    • Für das Wechseln zwischen Einzelseiten (z. B. Detailansicht)
    • Nutzt Header, Zurück-Funktion & modale Übergänge
  4. Layout-Integration
    • Mit Safe Areas, StatusBar, ScrollView, KeyboardAvoidingView
    • Optisch gestützt durch UI-Libraries (z. B. Tailwind, NativeBase, React Native Paper)

Weitere Tools:

  • react-native-safe-area-context für saubere Darstellung auf iPhones mit Notch
  • Icons über react-native-vector-icons oder @expo/vector-icons
  • Custom Layouts: Eigene Komponentenstruktur mit Tabs, Cards, Sections usw.

💡 Einsatzmöglichkeiten

  • Social Media Apps mit Tab Bar für Feed, Suche, Benachrichtigungen
  • Shop-Apps mit Drawer für Kategorien, Einstellungen, Wunschliste
  • Lern- oder Fitness-Apps mit kombinierten Navigationsarten
  • Unternehmens-Apps mit klarer Trennung zwischen Nutzerbereich & Adminbereich
  • Content-Plattformen mit Sticky Tabs, Custom Headern und modalen Überlagerungen

❓ Wichtige Fragen und Antworten zur App-Navigation

Was ist besser: Tab Bar oder Drawer Navigation?

  • Tab Bar eignet sich für häufig genutzte Bereiche mit schnellem Zugriff
  • Drawer Navigation passt besser bei vielen Seiten oder Funktionen, die nicht ständig sichtbar sein müssen Kann ich beides kombinieren? Ja – React Navigation erlaubt kombinierte Strukturen: z. B. Tab Bar als Hauptnavigation + Drawer für seltenere Menüpunkte Wie sorge ich für barrierefreie Navigation?
  • Icons mit Beschriftungen
  • Fokuszustände & VoiceOver-Tags
  • Große, klickbare Flächen
  • accessible={true} und accessibilityLabel verwenden Funktioniert Navigation auch offline? Ja – die Navigation basiert auf dem App-State und funktioniert ohne Internet, solange alle Inhalte lokal oder im Cache verfügbar sind. Wie lässt sich das Layout responsiv gestalten?
  • Mit Flexbox, Dimensions oder useWindowDimensions()
  • Inhalte skalieren für Tablets, Foldables oder große Bildschirme
  • Bedienelemente erreichbar positionieren (z. B. Bottom Sheets)