Inline-Stile sind sehr einfach anzuwenden, aber ihr Nachteil ist, dass es umso schwieriger ist,
all diesen Inline-Stilen zu folgen, je komplexer Ihre App und Ihr Setup werden, Ihre Komponente wird.
Sie werden dort oben eine Menge Code in Ihrem jsx-Code haben, und es kann schwierig sein, ihn zu lesen und
zu verstehen.
Daher können Sie zwar Inline-Stile verwenden, es
wird jedoch empfohlen, ein Stylesheet-Objekt zu verwenden, und genau das wird dort
unten erstellt.
Hierbei wird ein Stylesheet verwendet, das am Ende eine Klasse ist, die von React
Native bereitgestellt wird. Deshalb importieren wir es von dort und erstellen am Ende ein Javascript-Objekt, das Ihre gesamte Stilkonfiguration enthält.
Der Unterschied zu einem Vanille-Javascript-Objekt, das Sie auch selbst erstellen
können, besteht einfach in diesem Stylesheet. create könnte in Zukunft auch einige Leistungsoptimierungen anwenden und Ihre
Stile am Ende effizienter anwenden.
Daher sollten Sie dies verwenden, da Sie nichts verlieren, aber in Zukunft möglicherweise
von zusätzlichen Optimierungen profitieren. Im Moment, wenn ich das aufnehme, gibt
es zwar keinen Unterschied, aber Sie sollten wieder Stylesheet verwenden. Erstellen, weil es nicht schadet und Sie möglicherweise
in Zukunft zusätzliche Leistungsoptimierungen erhalten. Ein weiterer Vorteil der Verwendung des
Stylesheets besteht darin, dass automatisch eine Validierung hinzugefügt wird. Wenn Sie also eine falsche Stileigenschaft oder einen falschen Wert
verwenden, erkennt React Native dies und gibt einen Fehler aus, der das Erkennen erleichtert Solche Fehler würden,
wenn es keine Validierung
gäbe, stillschweigend fehlschlagen, den Stil einfach nicht anwenden und Sie könnten dies
nicht einmal sofort sehen oder Sie werden sehen, dass das Styling nicht korrekt ist, aber Sie sehen nicht
wirklich warum Es funktioniert nicht, daher ist diese integrierte
Validierung ein weiterer Vorteil der Verwendung dieses Stylesheet-Objekts hier. Zum Erstellen übergeben Sie ein Javascript-Objekt als Argument.
Das hier übergebene Argument ist also
ein Javascript-Objekt. In diesem Objekt können Sie jetzt Ihre Stile definieren, und
Sie tun dies nicht, indem Sie Padding 10 hinzufügen, da unklar wäre, wo Dies
sollte angewendet
werden. Stattdessen verwenden Sie einen beliebigen Eigenschaftsnamen Ihrer Wahl, wie z. B. Bildschirm, um den Stil für unsere Gesamtbildschirmansicht
festzulegen. Für diese
oberste Ebene von Ihnen hier und Sie könnten hier einen beliebigen
Namen gewählt haben muss nicht Bildschirm sein. Hier haben Sie jetzt ein verschachteltes
Javascript-Objekt. Der Wert für diese Eigenschaft ist also ein anderes Javascript-Objekt.
Dort richten Sie beispielsweise das Auffüllen von 50
ein, also auch das Styling, das wir dort oben hatten.
Jetzt können wir diesen Stil hier oben entfernen.
Ich habe immer noch die Stileigenschaft, aber ich habe nicht mehr das Inline-Stilobjekt. Stattdessen zeige ich
hier jetzt auf Stile. Dies ist diese Konstante, die unser Stylesheet-Objekt enthält. Ich zeige auf Stile und dann
mit Punkt, ich zeige auf den Bildschirmstil und das habe ich gemeint. Sie können hier einen beliebigen Namen wählen.
Wenn Sie diesen Stamm
benannt hätten, müssten Sie dort oben nur root verwenden. Damit Sie einen beliebigen Namen verwenden können, müssen Sie
nur sicherstellen,
dass die Namen, die Sie dort unten verwenden, mit den Namen übereinstimmen, die Sie hier oben
verwenden, und jetzt React Native mitteilen, dass diese Ansicht die für den Bildschirm dort unten definierten Stile erhalten soll.
Sie können das Gleiche für unseren Eingabecontainer tun.
Sagen wir, dieser Name liegt wieder ganz bei Ihnen, Eingabecontainer. Hier nehme ich dieses
Stilobjekt, das ich zuvor als
Inline-Stil auf diese Ansicht angewendet habe, und habe es als meinen Wert für diesen Eingabecontainer angewendet.
Hier in dieser Ansicht verweisen wir auf Stile. inputContainer, jetzt mit einigen automatischen
Formatierungen, die Sie übrigens in Visual Studio Code ausführen können, indem Sie Einstellungen, Tastaturkürzel und
dann nach Formatdokumenten suchen. Dies ist die Verknüpfung, die Sie drücken möchten, damit die
Dokumente und die Datei automatisch formatiert werden. Damit haben wir hier eine saubere Codestruktur. Wir
sehen, dass dies unsere Eingabecontainerstile sind, und wir wenden sie hier an.
Ein weiterer Vorteil dieses Stylesheet-Objekts besteht darin, dass Sie denselben Stil auf mehrere Ansichten anwenden können,
ohne ihn zu kopieren.
Wenn wir also den Eingabecontainerstil nicht nur in dieser Ansicht, sondern auch in dieser Ansicht
dort unten haben möchten, können wir einfach Stilstile schreiben. inputContainer, Sie können diesen Stil auf so viele Komponenten anwenden,
wie Sie möchten.
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
sich hier in der Texteingabe.
Dort werde ich nur diese Eingabe benennen, zu viele geschweifte Klammern, hier meine Stile
einrichten und dann bei der Texteingabe auf Stile verweisen. Eingabe, so.
Und wenn wir dies speichern, sehen wir genauso aus wie zuvor, aber jetzt verwenden wir das Stylesheet-Objekt,
das das Teilen und Wiederverwenden von Stilen erleichtert und möglicherweise auch einige
zukünftige Leistungsoptimierungen und darüber hinaus unseren jsx-Code hier einfach liefert ist jetzt viel schlanker.