Dies ist auch eine gute Übung für
Sie. Sie können das Video hier anhalten und versuchen, diese beiden Tasten einzeln nebeneinander zu positionieren. Nur
die beiden Tasten, nicht der Eingang und die beiden Tasten, aber diese beiden Tasten sollten sich in a befinden neue
Zeile unter dem Eingang, aber dann nebeneinander sitzen.
Nach der kurzen Pause, mit der Sie das Video pausieren können, machen wir das natürlich zusammen.
Warst du erfolgreich?
Lass es uns gemeinsam versuchen.
Der Schlüssel hier ist die Verwendung von Flexbox und einer anderen Ansicht, da Ansichtskomponenten, wie bereits erwähnt und wie wichtig
zu verstehen ist, Ihre Kernkomponente für die Organisation anderer Komponenten oder für die Verwendung als Container sind, den
Sie aber auch hier
gestalten können Fall, um andere Komponenten zu organisieren. Also werde ich die beiden Schaltflächen innerhalb
dieser Ansicht verschieben und jetzt können wir dieser Ansicht einen Stil zuweisen. Dieser Stil wird
natürlich hier in unserem Stilobjekt definiert und ich werde diesen
Schaltflächencontainer benennen. Das liegt bei Ihnen. Unter diesem Namen und dort möchte ich eine flexible Richtung der
Reihe festlegen, damit sie nebeneinander sitzen, und dann den Inhalt des Zwischenraums begründen, um den freien Platz
zwischen den beiden Schaltflächen zu erhalten.
Fügen wir nun den Stil hier zu dieser Ansicht hinzu, formatieren den Schaltflächencontainer und speichern diesen. Jetzt sind hier die Schaltflächen,
aber damit der freie Speicherplatz hier einen Effekt hat, der auf Android übrigens noch deutlicher wird, dass
er derzeit keinen hat Effekt,
damit der Abstand dazwischen keinen Effekt
hat, lassen Sie mich dies schnell auf Android zeigen.
Sie
sehen, es gibt keinen freien Speicherplatz.
Der Grund dafür ist einfach, dass wir unserem Schaltflächencontainer keine Breite zugewiesen haben. Daher wird, wie
Sie
erfahren haben, nur die Breite der untergeordneten
Elemente verwendet, und dies ist einfach die Breite der
beiden Schaltflächen, die zusammen
addiert werden. Daher gibt es keinen freien Speicherplatz für dazwischen hinzufügen.
Dazwischen haben wir also etwas freien Speicherplatz. Wir müssen dem Schaltflächencontainer lediglich ein Mit zuweisen, und
jetzt liegt die Breite natürlich bei Ihnen. Da der Eingang 80% hat,
könnten wir auch hier mit 80% oder vielleicht mit 60% gehen, um ihn etwas schmaler als den obigen Eingang zu haben, so dass
die Tasten nicht an den Rändern des Eingangs sitzen, aber das ist von Natürlich bis
zu
Ihnen und daher jetzt, wenn dies neu geladen wird und wir uns dies auf Android ansehen,
indem wir diese bequeme Methode zum Schließen und Neustarten verwenden, sollten wir jetzt etwas freien Speicherplatz zwischen
diesen beiden Schaltflächen sehen,
ja, das sieht gut aus.
Und natürlich können Sie damit
herumspielen, Sie können den Schaltflächen auch alternativ Stile hinzufügen, Sie
können auch hier Stil-Requisiten hinzufügen und links und rechts von jeder Schaltfläche einen Rand hinzufügen, der auch
funktioniert hätte.
Sie können hier auch mit anderen Werten herumspielen, z. B. mit Leerzeichen, um den freien Speicherplatz links und rechts von den
Schaltflächen und nicht nur zwischen diesen zu haben.
Dies sind alles Dinge, die Sie tun können. Ich werde hier mit dem Weltraum herumgehen und einen
letzten Blick darauf werfen, aber letztendlich liegt das natürlich einfach bei Ihnen.
Wichtig hierbei ist natürlich, dass Sie verstehen, wie Sie mit Hilfe einer Ansicht, die Sie dann um
Ihre Tasten und Ihre Flexbox wickeln, etwas erreichen können, und damit würde
ich sagen, dass wir hier einen anständigen Blick haben.
Nun, eine letzte Sache, wirklich letzte Sache, die ich jetzt noch tun möchte, ist die Größe dieser Schaltflächen zu ändern, weil sie nicht gleich groß
sind und ich denke, es würde ein bisschen schöner aussehen, wenn sie die gleiche Größe hätten.
Jetzt können Sie auf einer Schaltfläche keine Stilstütze hinzufügen und keine Breite festlegen, unabhängig davon, ob
Sie Inline-Stile oder das Stylesheet-Objekt
verwenden. Daher müssen Sie wissen, weshalb ich sie
hier behandele. Sie müssen Ihre Schaltfläche in eine separate Ansicht einbinden, wie ich es hier mache, und dieser Ansicht dann
eine Schaltfläche zuweisen. Hier können wir beispielsweise Stile hinzufügen, die sich auf eine Schaltflächeneigenschaft dort unten, auf jede
Ansicht und dort auf diese beziehen Schaltflächeneigenschaft, die ich jetzt hinzufüge, Sie könnten eine Breite von beispielsweise
40% hinzufügen, und das sind 40% der
übergeordneten Ansicht dieser Ansicht, also 40% der Ansicht des Schaltflächencontainers, die selbst 60% der gesamten verfügbaren Breite
einnimmt und das können wir natürlich auch auf der anderen Schaltfläche.
Das ist nur etwas, was Sie wissen müssen, wenn Sie Ihre Umgebungsansichten hier um Ihre Schaltflächen hinzufügen.
Wenn wir nun Android neu starten, sollten wir gleich große Schaltflächen haben, was
natürlich oft gewünscht wird.
Natürlich hätten Sie hier auch einen Pixelwert anstelle von Prozentwerten verwenden können, aber jetzt bin ich wirklich glücklich. Ich
denke, das ist
jetzt wirklich eine App, die gut aussieht, sich gut verhält und ja,
es ist ein guter Anfang mit React Native.
Jetzt können wir natürlich noch so viel mehr lernen und wir werden uns mit so viel mehr befassen, was
das Styling betrifft, denn wie bereits erwähnt, ist dies sicherlich nicht die schönste App, die Sie jemals erstellt
haben, aber wir haben viele wichtige Grundlagen behandelt Hier.