Kursbuch

1. LS 2.1 Ereignisverarbeitung

1.3. Bildschirmrotation erkennen

Bildschirmrotation erkennen

Um auf Änderungen der Bildschirmgröße zu reagieren, z. B. bei Drehung des Geräts, verwenden wir den Event-Listener Dimensions.addEventListener.

Beispielcode:

useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({ window }) => {
    setScreenWidth(window.width);
  });

  return () => subscription?.remove(); // Cleanup
}, []);

Erklärung:

Dimensions.addEventListener: Erkennt Veränderungen der Bildschirmgröße.
setScreenWidth: Aktualisiert den aktuellen Zustand der Bildschirmbreite.
Der useEffect-Hook führt diesen Code beim Starten der Komponente aus und sorgt auch dafür, dass der Listener beim Schließen wieder entfernt wird.