Zurück im Code haben wir damit begonnen, einige Ansichten hier einzufügen, und natürlich funktioniert dies jetzt nicht, dies wird nur
kaputt gehen oder es wird nichts Sinnvolles für den Bildschirm darstellen. In dieser ersten verschachtelten Ansicht hier, in
diesem Block,
habe ich eine Texteingabe und eine Schaltfläche erhalten. Bequemerweise wird beides von React Native bereitgestellt, wir haben hier
eine Texteingabe und wir haben auch eine Schaltflächenkomponente. Wir können also beide Texteingaben importieren, mit denen der
Benutzer Text und Schaltflächen eingeben kann. In dieser Ansicht, in dieser ersten verschachtelten Ansicht, füge ich eine Texteingabe
als selbstschließendes Tag hinzu, da zwischen dem Öffnen nichts passieren kann und schließende Tags und für die Schaltfläche könnte man denken, dass
Sie eine Schaltfläche wie
diese verwenden, aber tatsächlich funktioniert diese Schaltfläche "Native reagieren" nicht so, sondern es handelt
sich
um eine selbstschließende Schaltfläche, und Sie legen eine Titeleigenschaft fest, um zu definieren, welcher Text dort
und gerendert werden soll hier könnten wir hinzufügen hinzufügen. Jetzt haben wir dort eine Texteingabe und eine
Schaltfläche. Wenn wir diese und diese Neuladungen speichern, sehen wir die Schaltfläche hier, aber die Texteingabe sehen wir nicht, oder?
Das funktioniert also nicht wie beabsichtigt.
Der Grund dafür ist, dass die Texteingabe hier unter der Statusleiste ausgeblendet wird.
Jetzt ist also die Zeit gekommen, in der wir mit dem Hinzufügen eines Layouts und einer Struktur
zu dieser Seite beginnen sollten, da
das Hinzufügen von Komponenten allein nicht ausreicht. Bei einer React Native-App geht es darum, Komponenten zu
verwenden und dann das richtige Layout hinzuzufügen, das richtige Struktur zu Ihren Komponenten. Hier wäre es zum Beispiel sinnvoll, eine allgemeine Auffüllung um diese Ansicht hinzuzufügen, also in
dieser Draufsicht, so dass die Auffüllung im Grunde genommen einen gewissen Abstand vom Rand dieser Ansicht hat, der in unserem Fall
hier im Grunde genommen der Geräterahmen ist,
da ich es bin Wenn wir über die oberste Ansicht zum Inhalt der Ansicht sprechen, also einen gewissen Abstand zwischen
den Rändern der obersten Ansicht dieser umgebenden Ansicht und dem Inhalt in der Ansicht. Dazu können wir hier in
der Ansicht die Stileigenschaft hinzufügen.
Die meisten Komponenten in React Native unterstützen die Stileigenschaft, die Ansicht tut dies, und dort verwenden Sie diese
dynamische Inhaltsbindung, die Sie auch aus dem normalen React kennen, mit den einzelnen geschweiften Klammern,
und der Stil erwartet jetzt ein Javascript-Objekt. Daher fügen wir hier ein weiteres Paar geschweifter Klammern hinzu.
Ein häufiger Fehler besteht darin, dass Sie glauben, dass dies eine spezielle Syntax ist,
die doppelte geschweifte Klammern erfordert. In der Tat handelt es sich um die normale React-Syntax mit ähnlich geschweiften Klammern, bei der
dann der dynamische Wert an den Stil übergeben wird ist zufällig ein
Javascript-Objekt, daher haben wir ein weiteres Paar geschweifter Klammern. In diesem Objekt können Sie
jetzt Schlüssel-Wert-Paare haben, bei denen die Schlüssel Ihre Stileigenschaftsnamen und die Werte die Werte für
diese Stileigenschaften sind und diese Stileigenschaftsnamen von CSS beeinflusst werden.
Hier können Sie also Auffüllungen hinzufügen, die auch in React Native vorhanden sind. Eine umfassende Liste der
unterstützten Stileigenschaften finden Sie immer, indem Sie zu der von Ihnen verwendeten Komponente wechseln, z.
B. in der Ansicht hier, und dann auf klicken Wenn Sie in der Stileigenschaft und hier auf Ansichtsstile
klicken, wird eine Liste aller bereitgestellten Eigenschaften angezeigt, die Sie verwenden können, und hier werden einige spezielle Eigenschaften für
die Ansicht sowie einige allgemeine Requisiten wie Layout-Requisiten und dort angezeigt. Sie würden zum Beispiel die Polsterung finden.
So können Sie herausfinden, was unterstützt wird, aber Sie werden auch viele Beispiele in diesem Kurs sehen.
Also füge ich hier eine Auffüllung hinzu und der Wert kann jetzt nur eine Zahl sein, die
geräteunabhängige Pixel sind, also ein Pixelwert, der immer gut aussieht, egal welche Gerätegröße Sie haben.
Hier könnten wir also 10 hinzufügen, und wenn wir das tun, sehen wir jetzt, dass die Schaltfläche etwas
weiter unten ist. Vielleicht fügen wir hier 30 hinzu, damit wir einen größeren Unterschied sehen
können. Jetzt funktioniert das und wenn Sie über die Schaltfläche tippen. Sie
sehen hier nicht wirklich eine Eingabe, aber Sie sehen, dass meine Softtastatur unter Android geöffnet wurde.
Unter iOS wird sie nicht standardmäßig geöffnet. Dort
können Sie auch hier tippen und wenn Sie häufig genug tippen oder wenn Sie zu gehen Hardware, diese Tastatur schaltet Software-Tastatur um, sie sollte
sich auch dort öffnen, also haben wir
hier auch eine Eingabe.
Jetzt können wir diese Eingabe sehen, da sie jetzt nicht mehr hinter dieser Statusleiste steht.
Das Hinzufügen dieser Polsterung hat wahrscheinlich Sinn gemacht, da wir jetzt sichergestellt haben, dass sich unser Layout hier
innerhalb unseres Bildschirms befindet.
Jetzt gibt es noch andere Tools, mit denen Sie sicherstellen können, dass auch hier genügend
Polster vorhanden sind. Stellen Sie die Polsterung jedoch zunächst manuell ein und setzen Sie sie möglicherweise auf den Wert 30.
Wir haben also mit dem Layout begonnen. Gehen wir
nun zu dieser Komponente zurück und stellen sicher, dass wir etwas sehen können.
Wir können sehen, dass es eine Texteingabe gibt und wir müssen es nicht nur erraten.
Dazu können wir zur Texteingabe gehen und dort zum Beispiel die Platzhalter-Requisite hinzufügen. Um herauszufinden, was Sie
einstellen können, können Sie wie
zuvor immer zu den offiziellen Dokumenten gehen, in diesem Fall zu den Texteingabedokumenten und dort. Sie finden eine Beschreibung der Verwendung und einige
Beispiele. Wenn Sie jedoch nach unten
scrollen, finden Sie auch alle Requisiten, die Sie festlegen können, und dort finden Sie beispielsweise heraus, dass Sie
eine Platzhalter-Requisite festlegen können, bei der es sich um den Dummy-Text handelt wird angezeigt, bevor der Benutzer
Text eingegeben hat.
Hier ist also eine Zeichenfolge erforderlich, und hier können wir das Kursziel eingeben, da Sie hier Ihr
Kursziel festlegen können
sollten. Wenn Sie dies tun, sehen Sie sowohl auf Android als auch
auf iOS, dass dieser Kurszieltext vorhanden ist.
Jetzt könnte es noch ein
bisschen besser sein, könnte ein bisschen klarer sein, dass es eine Texteingabe gibt, und deshalb
werde ich
hier einen Stil hinzufügen, einen anderen Inline-Stil und hier werde ich jetzt die Randunterfarbe Schwarz, Schwarz einrichten ist eine Zeichenfolge, solche Farbverknüpfungen
werden in React Native unterstützt, und eine umfassende Liste aller verfügbaren Farben ist dieser Vorlesung hier
beigefügt. Ich kann auch sehen, dass eine Randunterbreite von beispielsweise 1 und dies dazu führt, dass eine Unterseite festgelegt
wird Begrenzen Sie diese Eingabe, damit wir sie jetzt, wenn wir zurückgehen, hier deutlich unter iOS
sehen können. Da auf iOS immer noch nicht so viel Platz vorhanden ist, lassen Sie mich diese
Auffüllung hier auf 50 erhöhen. ja das sieht besser aus
Jetzt haben wir diese Grenze unter unserer Eingabe und das macht deutlich, dass es hier eine Eingabe gibt.
Natürlich können Sie nicht nur einen Rand unten festlegen, sondern
auch einen allgemeinen Rand festlegen,
indem Sie hier unten eine Rahmenfarbe und eine Rahmenbreite weglassen.
Wenn Sie dies tun, wird dieser von einem umgeben Rand.
Nun ein wichtiger Hinweis zu diesen Stilnamen hier, Namen von Stileigenschaften, Sie sehen natürlich, dass
es sich um die Rahmenbreite und die so geschriebene Rahmenfarbe handelt. In normalem CSS hätten Sie eine Rahmenfarbe
gehabt, die die Rahmenfarbe anwenden würde, aber das würde ein ungültiger Eigenschaftsname in Javascript sein, weshalb
dies nicht unterstützt wird.
Tatsächlich wäre ein gültiger Eigenschaftsname in Javascript, wenn Sie dies in Anführungszeichen setzen, aber selbst das
wird in React Native nicht unterstützt, sodass diese alternativen Syntaxen, beispielsweise diese Syntax, in Javascript funktionieren würden, wenn Sie
einen Stil auf ein Web-HTML-Element anwenden Diese Syntaxen werden in React Native jedoch nicht unterstützt. Dort müssen Sie wirklich diese Kamelfallsyntax verwenden, bei
der Sie beispielsweise eine Rahmenfarbe wie diese schreiben, oder kurz gesagt, Sie müssen die
Eigenschaftsnamen verwenden, die Sie auch in den offiziellen Dokumenten finden Es gibt keine alternativen Namen für diese Stileigenschaften, und
wir könnten jetzt hier auch eine Auffüllung von beispielsweise 10 hinzufügen, damit wir einen gewissen Abstand zwischen dem Rand und dem
tatsächlichen Teil haben, an dem wir etwas eingeben, und ich würde sagen, dass dies bereits viel besser
aussieht und wir Ich kann deutlich sehen, dass wir hier eine Eingabe haben, in die Benutzer etwas
eingeben können.