Wir haben also mit der Texteingabe begonnen. Im Moment machen wir nichts mit den Werten, die der Benutzer eingibt.
Bevor wir dies tun, stellen wir sicher, dass sich die Schaltfläche nicht unter dieser Eingabe befindet, sondern
rechts daneben und für
Auch hier müssen wir am Layout arbeiten.
Deshalb habe ich hier diese zusätzliche Ansicht um die Texteingabe in der Schaltfläche.
Das würden wir nicht brauchen, aber jetzt können wir mit dieser verschachtelten Ansicht steuern, wie diese
beiden Elemente zueinander ausgerichtet sind, indem wir hier und jetzt
erneut die Stileigenschaft hinzufügen, um zu gestalten und Dinge zu positionieren. React Native verwendet Flexbox, die Sie möglicherweise auch verwenden Wenn
Sie dies nicht tun, finden Sie im Anhang Ressourcen, die Ihnen den Einstieg in die CSS-Flexbox erleichtern.
Sie müssen die Flexbox nicht in- und auswendig kennen, aber es ist hilfreich,
ein wenig darüber zu wissen. Die Flexbox funktioniert so, dass Elemente innerhalb einer Ansicht nebeneinander oder übereinander positioniert werden,
standardmäßig in React Native und übereinander Sie können dies ändern,
indem Sie die Flex-Richtung von der Spalte festlegen, die die Standardeinstellung für die Zeile ist, und indem Sie
diese hinzufügen. In dieser Ansicht überschreiben wir die Standardeinstellung, die die Standardeinstellung ist. Deshalb müssen wir
sie jetzt nicht aus der Spalte entfernen Wir werden sehen, dass die Schaltfläche in der Texteingabe nebeneinander
sitzt,
noch nicht so gut aussieht, aber sie sitzen nebeneinander. Damit dies jetzt besser aussieht, können wir auch
weitere hinzufügen. Sie
können beispielsweise definieren, wie die Dinge in ihrer Zeile oder Spalte ausgerichtet und verteilt werden.
Mit "Inhalt ausrichten" können Sie beispielsweise steuern, wie Elemente entlang ihrer Hauptachse verteilt werden, und mit Zeile
ist die Hauptachse von links nach rechts. Wenn
dies eine Spalte wäre, wäre die Hauptachse von oben nach unten.
Jetzt können wir also einen Wert angeben, und hier gibt mir meine IDE sogar eine automatische Vervollständigung, was sehr praktisch ist.
Wir können beispielsweise einen Wert für den Abstand zwischen angeben. Dies bedeutet, dass sich der gesamte verbleibende freie Speicherplatz zwischen
den beiden Elementen befindet, sodass sie jetzt
nicht direkt nebeneinander sitzen, sondern zwischen ihnen, wie Sie sehen können, ein freier Speicherplatz
vorhanden ist.
Jetzt können wir sie auch auf ihrer
Querachse ausrichten, sodass die Hauptachse für die Flexrichtungsreihe von links nach rechts war und
die Querachse dann von oben nach unten ist. Bei einer Spalte mit flexibler Richtung wäre die Hauptachse von oben nach unten und die
Querachse von links nach
rechts, so dass die Querachse sozusagen einfach das Gegenteil der Hauptachse ist. Richten Sie Inhaltspositionen entlang der Hauptachse
aus. Mit Ausrichtungselementen können Sie steuern, wie die untergeordneten Elemente dieser Ansicht entlang der Querachse ausgerichtet
werden. Dort haben Sie unterschiedliche Werte, z. B. Mitte.
In diesem Fall sollten alle Elemente vertikal zentriert werden, da wir eine Flex-Richtungszeile haben. Dies bedeutet, dass die Schaltfläche jetzt
besser aussieht und einfach in der Mitte dieser Eingabe zentriert ist. Nun, und jetzt können wir auch die Breite
dieser Eingabe ein wenig erhöhen, indem wir zur Texteingabe gehen. Dort können
wir im Stil auch eine Breite von beispielsweise 200 hinzufügen, um eine Breite von 200 Pixel zu
erhalten, was bedeutet, dass das ist jetzt etwas größer. Alternativ könnten Sie auch einen Prozentwert wie 80%
wählen, was bedeutet, dass 80% der verfügbaren Breite benötigt werden, die von der übergeordneten Komponente
bereitgestellt wird, also von der Ansicht, die sie umgibt. Und jetzt haben wir uns die ersten wichtigen Grundlagen angesehen,
wie man Dinge in React Native auslegt und Dinge stylt, aber im Moment machen wir das alles mit diesem
Konzept, das Inline-Stile genannt wird, was bedeutet, dass wir es einrichten die Stile direkt auf den Elementen und das
ist nicht ideal.