Aufgabe

Erstellen Sie eine Komponente namens Counter, die eine einfache Zähleranwendung simuliert. Die Komponente sollte einen Zählerwert anzeigen und einen Button enthalten, um diesen Wert zu erhöhen. Der anfängliche Zählerwert sollte anpassbar sein, indem er als Prop beim Verwenden der Counter-Komponente übergeben wird.

Schritte

1. Erstellen Sie die Counter-Komponente:
   • Definieren Sie eine funktionale Komponente namens Counter in der Datei Counter.js;
   • Verwenden Sie den useState-Hook, um den Zustand des Zählers innerhalb der Komponente zu verwalten.
2. Anzeigen des Zählerwerts:
   • Zeigen Sie den aktuellen Zählerwert auf dem Bildschirm an.
3. Implementieren Sie einen Button:
   • Verwenden Sie die TouchableOpacity-Komponente von React Native, um einen Button zu erstellen;
   • Beschriften Sie den Button mit dem Text "Increment".
4. Erhöhen des Zählers:
   • Implementieren Sie eine Funktion, z.B. incrementCounter, die den Zählerwert um 1 erhöht, jedes Mal, wenn der Button gedrückt wird;
   • Verbinden Sie diese Funktion mit dem onPress-Ereignis des Buttons.
5. Anpassbarer Anfangswert:
   • Ermöglichen Sie der Counter-Komponente, einen anfänglichen Zählerwert als Prop namens initialValue zu erhalten;
   • Verwenden Sie dieses Prop, um den anfänglichen Zustand des Zählers festzulegen.

Wir sollten das folgende Ergebnis sehen, nachdem wir diese Änderungen implementiert haben.

Repository mit den Anfangsdateien und -ordnern.

Projekt starten

Beginnen Sie das Projekt, indem Sie die Anfangsdateien und Daten über den angegebenen Terminalbefehl duplizieren.

Greifen Sie mit dem Befehl auf den neu erstellten Ordner zu, der die Projektdateien enthält:

Installieren Sie als Nächstes die erforderlichen Pakete mit:

Um die Anwendung zu starten und ihre anfängliche Benutzeroberfläche anzuzeigen, führen Sie den folgenden Befehl im Terminal aus:

Hinweis

1. Verwenden Sie den useState Hook im Counter-Komponente, um den Zustand zu verwalten;
2. Nutzen Sie die Text- und TouchableOpacity-Komponenten, um Text anzuzeigen und einen berührbaren Button zu erstellen;
3. Übergeben Sie den anfänglichen Zählerwert als Prop an die Counter-Komponente, wenn Sie sie in einer anderen Datei verwenden.

Falls Sie auf Hindernisse stoßen, während Sie die Aufgabe ausführen, empfehlen wir, die bereitgestellte Aufnahme zu konsultieren, die eine detaillierte Anleitung zu jedem Aspekt bietet. Wir wünschen Ihnen viel Erfolg!

In der Praxis