1 00:00:02,310 --> 00:00:08,520 Lassen Sie uns diese Komponenten dort stylen, und dafür möchten wir den Textkomponenten einen Stil zuweisen. 2 00:00:09,120 --> 00:00:12,780 Die Textkomponente unterstützt zwar die Stileigenschaft, wie Sie in den 3 00:00:12,780 --> 00:00:19,680 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 4 00:00:19,710 --> 00:00:20,610 Ansichtskomponente einbinden, 5 00:00:20,970 --> 00:00:26,030 und das ist nur die Ansichtskomponente, die wir verwenden importieren aus React Native, das ist 6 00:00:26,040 --> 00:00:31,560 auch der Teil, den ich mit Ihnen gemeint habe. Sie haben nur ein paar Basiskomponenten, aber 7 00:00:31,560 --> 00:00:36,960 sie bringen Sie sehr weit, weil Sie die ganze Zeit mit Ansichten, Schaltflächen und Texten arbeiten. 8 00:00:37,530 --> 00:00:44,730 Hier werde ich diesen Text mit der Komponente zum Öffnen und Schließen der Ansicht hier und jetzt umschließen. Hier haben 9 00:00:44,730 --> 00:00:46,090 wir mehr Stiloptionen. 10 00:00:46,290 --> 00:00:50,730 Jetzt wieder gehe ich hier nicht auf Inline-Stile ein, sondern 11 00:00:50,730 --> 00:00:54,000 füge dem Stylesheet Stile hinzu. Zum 12 00:00:54,210 --> 00:01:03,810 Beispiel könnten wir dieses Listenelement benennen, aber der Name liegt bei Ihnen. Nehmen wir an, wir möchten hier einen Abstand von 10 13 00:01:03,810 --> 00:01:17,750 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 14 00:01:17,880 --> 00:01:25,720 Listenelement als Stil zu, indem Sie auf Stile verweisen. listItem hier und damit, wenn wir dies 15 00:01:25,770 --> 00:01:34,380 speichern, sollte unser Listenelement jetzt ein bisschen besser aussehen, lernen Sie React Native, so 16 00:01:34,610 --> 00:01:39,620 sieht es aus. Jetzt wäre ein gewisser Abstand wahrscheinlich auch schön. 17 00:01:39,620 --> 00:01:46,850 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 18 00:01:46,850 --> 00:01:49,270 dem umgebenden Inhalt, also können wir 19 00:01:49,280 --> 00:01:55,130 mit den anderen Elementen um ihn herum und dort einen Rand hinzufügen 10, um einen Rand in alle Richtungen 20 00:01:55,460 --> 00:01:59,600 hinzuzufügen, können wir auch einfach einen Rand oben oder unten hinzufügen, oder und 21 00:01:59,720 --> 00:02:06,050 das ist etwas, was in CSS nicht vorhanden ist. Sie können einen vertikalen Rand von 10 hinzufügen, um einen Rand 22 00:02:06,050 --> 00:02:08,560 oben zu haben und unten, aber nicht links 23 00:02:08,720 --> 00:02:15,770 und rechts, und das ist übrigens ein Beispiel dafür, wie dies auf CSS basiert, aber es ist nicht dasselbe, weil der vertikale Rand 24 00:02:15,860 --> 00:02:23,210 keine Eigenschaft ist, die Sie in CSS haben, sondern in React Native. Wenn wir das jetzt speichern und 25 00:02:23,210 --> 00:02:29,840 hier Learn React Native hinzufügen, sehen Sie jetzt, dass zwischen diesen 26 00:02:30,030 --> 00:02:38,430 Elementen ein gewisser Abstand besteht, und natürlich auch unter iOS, wenn wir dies dort tun. 27 00:02:38,550 --> 00:02:46,440 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 28 00:02:46,440 --> 00:02:51,050 in das Styling eintauchen und alles, was Sie dort später in diesem Kurs tun können, 29 00:02:51,060 --> 00:02:54,090 müssen wir nur bekommen dort natürlich Schritt für Schritt. 30 00:02:54,090 --> 00:03:00,750 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 31 00:03:00,750 --> 00:03:01,460 Element, das 32 00:03:01,500 --> 00:03:05,730 Sie wiederholen, und wir wiederholen nicht mehr nur den Text, sondern jetzt Wiederholen Sie die gesamte 33 00:03:05,730 --> 00:03:07,020 Ansicht, daher sollte der 34 00:03:07,320 --> 00:03:14,430 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 35 00:03:14,430 --> 00:03:15,520 der Schlüssel in 36 00:03:15,600 --> 00:03:19,230 die Ansicht anstatt in den Text verschoben wurde, sollte dies weg sein.