Kursinhalt
Grundlagen von React Native
Grundlagen von React Native
3. Gemeinsame Prinzipien
Herausforderung: Stile Hinzufügen
Herausforderung!
Jetzt bist du dran, Styling in unsere aktuelle App zu implementieren. Folge diesen Schritten:
Schritte
- Importiere
StyleSheet
ausreact-native
; - Initialisiere Styles mit
StyleSheet.create()
; - Gib die folgenden Klassennamen mit ihren jeweiligen Eigenschaften und Werten an:
- container:
flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#00FFAB", flexDirection: "row",
; text
:fontSize: 18, color: "#913f92",
;image
:marginLeft: 10,
.
- container:
- Wende die erstellten Klassennamen auf die entsprechenden UI-Elemente an:
- Wende
container
auf dieView
an; - Wende
text
auf dieText
an; - Wende
image
auf dieImage
an.
- Wende
Wir sollten das folgende Ergebnis sehen, nachdem diese Änderungen implementiert wurden.
Führen Sie den Befehl im Terminal aus, um das Projekt zu kopieren und mit der Herausforderung zu beginnen.
Gehen Sie zu dem erstellten Ordner, in dem sich die Projektdateien befinden.
Installieren Sie die notwendigen Pakete.
Um die App zu starten und das anfängliche Erscheinungsbild zu sehen, führen Sie den folgenden Befehl im Terminal aus:
Wenn Sie während der Implementierung der Herausforderung auf Schwierigkeiten stoßen, empfehlen wir, die folgende Aufnahme mit einer Schritt-für-Schritt-Anleitung zu überprüfen, wie alles zu tun ist. Viel Glück!
In der Praxis
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 6