🧭 Tab Bar / Drawer Navigation / Layout

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)