🧭 Navigation / Routing

Navigation oder Routing in mobilen Apps beschreibt die Art und Weise, wie Nutzer sich innerhalb einer App von einem Bildschirm (Screen) zum nächsten bewegen – z. B. von der Startseite zum Profil, von einem Produkt zur Kasse oder von einem Eintrag zur Detailansicht. Eine durchdachte Navigation sorgt dafür, dass die App intuitiv, schnell und benutzerfreundlich zu bedienen ist – ganz ähnlich wie beim Surfen auf einer Website, nur angepasst an mobile Endgeräte.

🔧 Technische Erklärung

Navigation wird über sogenannte Routen gesteuert, die jeder Screen oder Ansicht in der App zugewiesen ist. Moderne Apps verwenden dabei navigationsbasierte Frameworks, die den Übergang zwischen diesen Routen organisieren.

In React Native ist der Standard:

• React Navigation: weit verbreitet, flexibel und mächtig

• Navigationstypen:

  • Stack Navigation (zurück / vorwärts)

  • Tab Navigation (untere Menüleiste)

  • Drawer Navigation (Seitenmenü)

  • Modal Navigation (Pop-up-ähnlich)

Jeder Screen ist mit einem Namen (Route) definiert. Durch Navigation-Befehle (navigate(), push(), goBack()) springt die App zwischen den Routen hin und her.

Erweiterte Funktionen:

• Deep Linking (Navigation per URL oder QR-Code)

• Dynamische Parameter (z. B. Produkt-ID)

• Custom Transitions (Animationen)

💡 Einsatzmöglichkeiten

• App-Struktur logisch abbilden (Start, Login, Inhalte, Einstellungen)

• Tab-Leisten für Hauptnavigation

• Detailansichten mit Zurück-Button

• Modale Fenster für Aktionen oder Pop-ups

• Dynamische Navigation z. B. bei Login-Status oder Feature-Freischaltung

• Navigation basierend auf Standort oder QR-Code (Deep Link)

❓ Wichtige Fragen und Antworten zu Navigation / Routing

Was ist der Unterschied zwischen Stack- und Tab-Navigation?

• Stack-Navigation arbeitet wie ein Stapel: du kannst „zurückgehen“.

• Tab-Navigation zeigt feste Kategorien, z. B. Start, Suche, Profil – und wechselt zwischen diesen sofort.

Wie funktioniert Navigation in React Native?
Mit Bibliotheken wie @react-navigation/native. Dort definierst du Screens und Routen – und nutzt navigation.navigate('RouteName') zum Wechsel.

Kann Navigation auch durch QR-Code oder Links ausgelöst werden?
Ja. Das nennt sich Deep Linking – ideal für gezielte Sprünge innerhalb der App, z. B. aus E-Mails oder Marketingaktionen.

Wie bleibt Navigation performant in großen Apps?
Durch Lazy Loading von Screens, nutzerspezifische Navigationspfade und Zustandsmanagement (z. B. Redux, Context API).

Beeinflusst Navigation die Barrierefreiheit?
Ja. Gute Navigation unterstützt VoiceOver / TalkBack, tastaturbedienbare Elemente und logisch benannte Routen, damit Screenreader sie verstehen können.