Lassen Sie uns diese Komponenten dort stylen, und dafür möchten wir den Textkomponenten einen Stil zuweisen.
Die Textkomponente unterstützt zwar die Stileigenschaft, wie Sie in den
offiziellen Dokumenten überprüfen können, aber die Textkomponente unterstützt tatsächlich weniger Stilfunktionen als die Ansicht. Daher werde ich dies in eine andere
Ansichtskomponente einbinden,
und das ist nur die Ansichtskomponente, die wir verwenden importieren aus React Native, das ist
auch der Teil, den ich mit Ihnen gemeint habe. Sie haben nur ein paar Basiskomponenten, aber
sie bringen Sie sehr weit, weil Sie die ganze Zeit mit Ansichten, Schaltflächen und Texten arbeiten.
Hier werde ich diesen Text mit der Komponente zum Öffnen und Schließen der Ansicht hier und jetzt umschließen. Hier haben
wir mehr Stiloptionen.
Jetzt wieder gehe ich hier nicht auf Inline-Stile ein, sondern
füge dem Stylesheet Stile hinzu. Zum
Beispiel könnten wir dieses Listenelement benennen, aber der Name liegt bei Ihnen. Nehmen wir an, wir möchten hier einen Abstand von 10
haben, geben wir vielleicht Geben Sie hier eine Hintergrundfarbe für diesen grauen Hex-Code ein, geben Sie ihm eine Randfarbe von Schwarz und eine Randbreite von Eins. Weisen Sie dieser Ansicht nun das
Listenelement als Stil zu, indem Sie auf Stile verweisen. listItem hier und damit, wenn wir dies
speichern, sollte unser Listenelement jetzt ein bisschen besser aussehen, lernen Sie React Native, so
sieht es aus. Jetzt wäre ein gewisser Abstand wahrscheinlich auch schön.
Mit dem Rand können wir erreichen, dass der Abstand zwischen dem Rand und dem Inhalt aufgefüllt wird, der Rand zwischen dem Rand und
dem umgebenden Inhalt, also können wir
mit den anderen Elementen um ihn herum und dort einen Rand hinzufügen 10, um einen Rand in alle Richtungen
hinzuzufügen, können wir auch einfach einen Rand oben oder unten hinzufügen, oder und
das ist etwas, was in CSS nicht vorhanden ist. Sie können einen vertikalen Rand von 10 hinzufügen, um einen Rand
oben zu haben und unten, aber nicht links
und rechts, und das ist übrigens ein Beispiel dafür, wie dies auf CSS basiert, aber es ist nicht dasselbe, weil der vertikale Rand
keine Eigenschaft ist, die Sie in CSS haben, sondern in React Native. Wenn wir das jetzt speichern und
hier Learn React Native hinzufügen, sehen Sie jetzt, dass zwischen diesen
Elementen ein gewisser Abstand besteht, und natürlich auch unter iOS, wenn wir dies dort tun.
Dies fügt nun unsere Artikel hinzu und obwohl wir wahrscheinlich immer noch keinen Schönheitspreis gewinnen, ist es zumindest ein guter Anfang und wir werden viel tiefer
in das Styling eintauchen und alles, was Sie dort später in diesem Kurs tun können,
müssen wir nur bekommen dort natürlich Schritt für Schritt.
Eine Sache, die wir jetzt übrigens anpassen müssen, ist, dass der Schlüssel hier immer auf dem Stammelement in Ihrer Liste sein muss, also auf dem
Element, das
Sie wiederholen, und wir wiederholen nicht mehr nur den Text, sondern jetzt Wiederholen Sie die gesamte
Ansicht, daher sollte der
Schlüssel hier zur Ansicht und nicht zum Text in der Ansicht hinzugefügt werden. Deshalb habe ich diese Warnung erhalten, diesen Fehler noch einmal, jetzt, wo
der Schlüssel in
die Ansicht anstatt in den Text verschoben wurde, sollte dies weg sein.