LS2.1_AM8 - Kreative Übungen – React Native Mini-Challenges
| Website: | Moodle, virtuelles Arbeiten und eLearning - Herzlich willkommen! |
| Kurs: | Plattformübergreifende Mobile App-Entwicklung mit React Native: Vom Konzept zur Bewegungstracker-App für iOS und Android |
| Buch: | LS2.1_AM8 - Kreative Übungen – React Native Mini-Challenges |
| Gedruckt von: | Guest user |
| Datum: | Montag, 16. Februar 2026, 18:00 |
1. Einführung: So funktioniert das Challenge-Buch
Willkommen im Challenge-Buch – Kreative Übungen in React Native
Hier finden Sie kreative Zusatzaufgaben zur App-Entwicklung mit React Native. Jede Aufgabe ist kurz, motivierend und freiwillig. Sie können selbst entscheiden, welche Challenge Sie bearbeiten möchten.
So funktioniert's:
- Jede Challenge besteht aus einer kurzen Aufgabenbeschreibung, einem Ziel und einem Umsetzungshinweis.
- Sie wählen selbst, welche Challenge Sie bearbeiten möchten.
- Ihre Lösungen können Sie im Journal dokumentieren oder im Studienordner speichern.
Ziel:
Freude am Ausprobieren, kreatives Denken fördern und Ihre App-Ideen selbstständig erweitern.
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
Viewmit: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.
2.1. Lösung - Challenge 1: Hintergrundfarbe ändern
3. Challenge 2: Textfarbe per Button wechseln
Challenge 2: Textfarbe per Button wechseln
Ziel:
Ein Button soll die Textfarbe zwischen Schwarz und Rot wechseln.
Tipp zur Umsetzung:
- Verwenden Sie eine
useState-Variable, z. B.textColor. - Ändern Sie die Farbe im Text-Element:
<Text style={{ color: textColor }}> - Button:
onPress={() => setTextColor(textColor === 'black' ? 'red' : 'black')}
Erweiterung:
- Ermöglichen Sie die Auswahl weiterer Farben über mehrere Buttons oder ein Auswahlmenü.
Dokumentation:
Tragen Sie Ihre Lösung in Ihr Journal unter der Überschrift „Challenge 2: Textfarbe“ ein.