Kapitel druckenKapitel drucken

LS2.1_AM8 - Kreative Übungen – React Native Mini-Challenges

2. Challenge 1: Hintergrundfarbe ändern

Challenge 1: Hintergrundfarbe ändern

Ziel:

Sie implementieren einen Button, der beim Klicken die Hintergrundfarbe der App verändert.

Idee:

Ein Button mit dem Titel „Farbe wechseln“ ändert die Hintergrundfarbe – z. B. zwischen Weiß und Hellblau.

Tipp zur Umsetzung:

  • Verwenden Sie eine useState-Variable, z. B. bgColor.
  • Setzen Sie die Hintergrundfarbe in der View mit: style={{ backgroundColor: bgColor }}
  • Beispiel für den Button: onPress={() => setBgColor(bgColor === 'white' ? 'lightblue' : 'white')}

Erweiterung:

  • Fügen Sie zwei Buttons hinzu: „Hellmodus“ und „Dunkelmodus“

Dokumentation:

Tragen Sie Ihre Lösung in Ihr Journal unter der Überschrift „Challenge 1: Hintergrundfarbe“ ein.