LT2_E1 – Journal: Lernthema 2 - Fachschicht implementieren - Lösungsvorschlag

LS2-1-A4c-Bildschirmrotation-erfassen-Loesung - Snack

✅ Musterlösung – Bildschirmrotation-Übung (Arbeitsauftrag 4c)

📌 Codeauszug (ergänzt):

import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions } from 'react-native';

export default function App() {
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
  const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height);

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

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View style={{ padding: 50 }}>
      <Text>Aktuelle Bildschirmbreite: {screenWidth}px</Text>
      <Text>Aktuelle Bildschirmhöhe: {screenHeight}px</Text>
    </View>
  );
}

✏️ Kurze Erklärung:

• Zusätzlich zur Breite wird nun auch die Höhe bei Rotation automatisch aktualisiert.
• Dafür wurde ein zweiter State screenHeight angelegt.
• In der addEventListener-Funktion wird setScreenHeight(window.height) ergänzt.
• Beide Werte werden im Interface mit <Text> angezeigt.

📋 Antworten auf Reflexionsfragen:

1. Werden Breite und Höhe gleichzeitig aktualisiert?
✅ Ja, beide setState-Funktionen werden im gleichen Event-Listener gesetzt.

2. Wie ist der Code strukturiert?
✅ Klar getrennt nach useState, useEffect und return. Die Anzeige ist übersichtlich.

3. Könnte man beide Werte in ein Objekt zusammenfassen?
✅ Ja, z. B. mit const [screenSize, setScreenSize] = useState({width: ..., height: ...}), aber zwei States sind bei diesem einfachen Beispiel ebenfalls gut lesbar.

4. Wird der Event Listener nur einmal registriert und wieder entfernt?
✅ Ja, useEffect läuft nur einmal beim Start ([] als Abhängigkeit) und entfernt den Listener im return.

✅ Abgabehinweis für Schüler:innen:
→ Journal-Eintrag unter: „Bildschirmrotation-Übung“
→ Code + kurze Erklärung + Antworten auf Kontrollfragen