1 00:00:04,540 --> 00:00:11,110 Inline-Stile sind sehr einfach anzuwenden, aber ihr Nachteil ist, dass es umso schwieriger ist, 2 00:00:11,110 --> 00:00:18,260 all diesen Inline-Stilen zu folgen, je komplexer Ihre App und Ihr Setup werden, Ihre Komponente wird. 3 00:00:18,370 --> 00:00:24,040 Sie werden dort oben eine Menge Code in Ihrem jsx-Code haben, und es kann schwierig sein, ihn zu lesen und 4 00:00:24,040 --> 00:00:24,720 zu verstehen. 5 00:00:24,870 --> 00:00:27,870 Daher können Sie zwar Inline-Stile verwenden, es 6 00:00:27,940 --> 00:00:32,740 wird jedoch empfohlen, ein Stylesheet-Objekt zu verwenden, und genau das wird dort 7 00:00:32,740 --> 00:00:33,820 unten erstellt. 8 00:00:33,820 --> 00:00:39,120 Hierbei wird ein Stylesheet verwendet, das am Ende eine Klasse ist, die von React 9 00:00:39,130 --> 00:00:46,660 Native bereitgestellt wird. Deshalb importieren wir es von dort und erstellen am Ende ein Javascript-Objekt, das Ihre gesamte Stilkonfiguration enthält. 10 00:00:46,660 --> 00:00:51,940 Der Unterschied zu einem Vanille-Javascript-Objekt, das Sie auch selbst erstellen 11 00:00:51,940 --> 00:00:59,590 können, besteht einfach in diesem Stylesheet. create könnte in Zukunft auch einige Leistungsoptimierungen anwenden und Ihre 12 00:00:59,590 --> 00:01:01,530 Stile am Ende effizienter anwenden. 13 00:01:01,600 --> 00:01:07,480 Daher sollten Sie dies verwenden, da Sie nichts verlieren, aber in Zukunft möglicherweise 14 00:01:07,540 --> 00:01:12,190 von zusätzlichen Optimierungen profitieren. Im Moment, wenn ich das aufnehme, gibt 15 00:01:12,190 --> 00:01:17,800 es zwar keinen Unterschied, aber Sie sollten wieder Stylesheet verwenden. Erstellen, weil es nicht schadet und Sie möglicherweise 16 00:01:17,800 --> 00:01:22,120 in Zukunft zusätzliche Leistungsoptimierungen erhalten. Ein weiterer Vorteil der Verwendung des 17 00:01:22,120 --> 00:01:28,150 Stylesheets besteht darin, dass automatisch eine Validierung hinzugefügt wird. Wenn Sie also eine falsche Stileigenschaft oder einen falschen Wert 18 00:01:28,150 --> 00:01:33,550 verwenden, erkennt React Native dies und gibt einen Fehler aus, der das Erkennen erleichtert Solche Fehler würden, 19 00:01:33,550 --> 00:01:35,380 wenn es keine Validierung 20 00:01:35,470 --> 00:01:39,370 gäbe, stillschweigend fehlschlagen, den Stil einfach nicht anwenden und Sie könnten dies 21 00:01:39,370 --> 00:01:45,160 nicht einmal sofort sehen oder Sie werden sehen, dass das Styling nicht korrekt ist, aber Sie sehen nicht 22 00:01:45,160 --> 00:01:48,070 wirklich warum Es funktioniert nicht, daher ist diese integrierte 23 00:01:48,070 --> 00:01:53,950 Validierung ein weiterer Vorteil der Verwendung dieses Stylesheet-Objekts hier. Zum Erstellen übergeben Sie ein Javascript-Objekt als Argument. 24 00:01:54,040 --> 00:01:56,680 Das hier übergebene Argument ist also 25 00:01:56,680 --> 00:02:01,450 ein Javascript-Objekt. In diesem Objekt können Sie jetzt Ihre Stile definieren, und 26 00:02:01,450 --> 00:02:07,000 Sie tun dies nicht, indem Sie Padding 10 hinzufügen, da unklar wäre, wo Dies 27 00:02:07,000 --> 00:02:08,020 sollte angewendet 28 00:02:08,020 --> 00:02:15,280 werden. Stattdessen verwenden Sie einen beliebigen Eigenschaftsnamen Ihrer Wahl, wie z. B. Bildschirm, um den Stil für unsere Gesamtbildschirmansicht 29 00:02:15,370 --> 00:02:16,810 festzulegen. Für diese 30 00:02:16,810 --> 00:02:21,040 oberste Ebene von Ihnen hier und Sie könnten hier einen beliebigen 31 00:02:21,040 --> 00:02:26,490 Namen gewählt haben muss nicht Bildschirm sein. Hier haben Sie jetzt ein verschachteltes 32 00:02:26,560 --> 00:02:30,610 Javascript-Objekt. Der Wert für diese Eigenschaft ist also ein anderes Javascript-Objekt. 33 00:02:30,610 --> 00:02:33,800 Dort richten Sie beispielsweise das Auffüllen von 50 34 00:02:33,820 --> 00:02:37,630 ein, also auch das Styling, das wir dort oben hatten. 35 00:02:37,700 --> 00:02:40,510 Jetzt können wir diesen Stil hier oben entfernen. 36 00:02:40,520 --> 00:02:45,980 Ich habe immer noch die Stileigenschaft, aber ich habe nicht mehr das Inline-Stilobjekt. Stattdessen zeige ich 37 00:02:46,010 --> 00:02:52,120 hier jetzt auf Stile. Dies ist diese Konstante, die unser Stylesheet-Objekt enthält. Ich zeige auf Stile und dann 38 00:02:52,150 --> 00:02:58,430 mit Punkt, ich zeige auf den Bildschirmstil und das habe ich gemeint. Sie können hier einen beliebigen Namen wählen. 39 00:02:58,430 --> 00:03:00,090 Wenn Sie diesen Stamm 40 00:03:00,170 --> 00:03:06,440 benannt hätten, müssten Sie dort oben nur root verwenden. Damit Sie einen beliebigen Namen verwenden können, müssen Sie 41 00:03:06,440 --> 00:03:07,160 nur sicherstellen, 42 00:03:07,160 --> 00:03:12,550 dass die Namen, die Sie dort unten verwenden, mit den Namen übereinstimmen, die Sie hier oben 43 00:03:12,570 --> 00:03:18,540 verwenden, und jetzt React Native mitteilen, dass diese Ansicht die für den Bildschirm dort unten definierten Stile erhalten soll. 44 00:03:18,650 --> 00:03:20,990 Sie können das Gleiche für unseren Eingabecontainer tun. 45 00:03:20,990 --> 00:03:25,860 Sagen wir, dieser Name liegt wieder ganz bei Ihnen, Eingabecontainer. Hier nehme ich dieses 46 00:03:25,880 --> 00:03:28,400 Stilobjekt, das ich zuvor als 47 00:03:28,400 --> 00:03:37,130 Inline-Stil auf diese Ansicht angewendet habe, und habe es als meinen Wert für diesen Eingabecontainer angewendet. 48 00:03:37,130 --> 00:03:42,260 Hier in dieser Ansicht verweisen wir auf Stile. inputContainer, jetzt mit einigen automatischen 49 00:03:42,260 --> 00:03:48,110 Formatierungen, die Sie übrigens in Visual Studio Code ausführen können, indem Sie Einstellungen, Tastaturkürzel und 50 00:03:49,130 --> 00:03:54,860 dann nach Formatdokumenten suchen. Dies ist die Verknüpfung, die Sie drücken möchten, damit die 51 00:03:55,010 --> 00:04:00,780 Dokumente und die Datei automatisch formatiert werden. Damit haben wir hier eine saubere Codestruktur. Wir 52 00:04:00,860 --> 00:04:04,710 sehen, dass dies unsere Eingabecontainerstile sind, und wir wenden sie hier an. 53 00:04:04,730 --> 00:04:10,910 Ein weiterer Vorteil dieses Stylesheet-Objekts besteht darin, dass Sie denselben Stil auf mehrere Ansichten anwenden können, 54 00:04:10,910 --> 00:04:12,680 ohne ihn zu kopieren. 55 00:04:12,710 --> 00:04:18,200 Wenn wir also den Eingabecontainerstil nicht nur in dieser Ansicht, sondern auch in dieser Ansicht 56 00:04:18,350 --> 00:04:25,160 dort unten haben möchten, können wir einfach Stilstile schreiben. inputContainer, Sie können diesen Stil auf so viele Komponenten anwenden, 57 00:04:25,190 --> 00:04:26,290 wie Sie möchten. 58 00:04:26,290 --> 00:04:32,460 Jetzt brauche ich es hier natürlich nicht, aber wir könnten es hier verwenden, wenn wir es brauchen würden. Der letzte Stil, den ich anwenden möchte, befindet 59 00:04:32,460 --> 00:04:35,030 sich hier in der Texteingabe. 60 00:04:35,030 --> 00:04:40,970 Dort werde ich nur diese Eingabe benennen, zu viele geschweifte Klammern, hier meine Stile 61 00:04:41,130 --> 00:04:55,430 einrichten und dann bei der Texteingabe auf Stile verweisen. Eingabe, so. 62 00:04:55,560 --> 00:05:01,320 Und wenn wir dies speichern, sehen wir genauso aus wie zuvor, aber jetzt verwenden wir das Stylesheet-Objekt, 63 00:05:01,320 --> 00:05:05,610 das das Teilen und Wiederverwenden von Stilen erleichtert und möglicherweise auch einige 64 00:05:05,610 --> 00:05:10,290 zukünftige Leistungsoptimierungen und darüber hinaus unseren jsx-Code hier einfach liefert ist jetzt viel schlanker.