In diesem Vortrag möchte ich etwas tiefer in die Flexbox eintauchen, insbesondere in Bezug darauf, wie Sie sie in React Native-Apps
verwenden.
Wenn Sie bereits alles darüber wissen, können Sie diese Vorlesung natürlich überspringen.
Deshalb habe ich eine einfache Dummy-Anwendung vorbereitet, und natürlich finden Sie im
Anhang eine normale React Native-App, die mit expo und in der App erstellt wurde. js Datei hier, was ich am Ende
habe, ist nur eine Ansicht mit drei Ansichten dort, wo jede Ansicht dann einen Text mit Text eins,
zwei, drei hat, dies schafft einfach einige Felder
mit verschiedenen Farben - rot, blau und grün und jetzt Wir werden Flexbox verwenden, um diese Boxen
zu verschieben, damit Sie ein Gefühl dafür bekommen, wie Flexbox funktioniert, weil es so wichtig ist.
Das Wichtigste
zuerst: Standardmäßig verwendet jede Ansicht in React Native, auch wenn Sie keine
speziellen Stile zuweisen, Flexbox. Dies unterscheidet sich beispielsweise vom Web. Wenn Sie ein Div
haben, das einer Ansicht entspricht, funktioniert dies nicht Flexbox wird standardmäßig nicht verwendet.
In React Native organisiert jede Ansicht standardmäßig ihre untergeordneten Elemente mithilfe dieser Flexbox-Sache. Flexbox ist
einfach ein Begriff, ein Konzept aus CSS, bei dem es darum geht, untergeordnete Elemente in einem
eindimensionalen Raum zu organisieren
zum Beispiel in einer Spalte. Dies ist auch eine andere
Standardeinstellung. Standardmäßig verwendet nicht jede Ansicht die Flexbox, sondern organisiert standardmäßig untergeordnete Elemente in einer Spalte, also
von oben nach unten. Das ist auch ein Unterschied zum
Web, und ich möchte diese Unterschiede nicht zu sehr hervorheben, da Sie natürlich kein Webentwickler sein
müssen, um React Native-Apps zu erstellen, aber ich denke, viele Leute kennen sich mit Webentwicklung aus kennen CSS Flexbox und
daher ist es sinnvoll, auch über die Unterschiede zu sprechen. Wenn Sie im Web Flexbox verwenden, ist
es nicht nur
nicht standardmäßig aktiviert. Wenn Sie es
aktivieren, werden standardmäßig alle untergeordneten Elemente in einer Reihe organisiert, und hier werden sie standardmäßig
in einer Zeile organisiert Säule.
Sie können diese Standardeinstellung jedoch ändern. In diesem Fall sehen Sie in der Ansicht, in der sich meine Felder befinden,
indem Sie hier die Flexrichtung hinzufügen und diese beispielsweise auf Zeile setzen, dass diese drei Felder in einer Reihe von links
nach rechts angeordnet sind. Jetzt haben Sie neben Zeile
und Spalte auch Zeilenumkehr und Spaltenumkehr und dies macht
einfach auch das, was der Name impliziert.
Jetzt haben wir noch eine Reihe, aber das erste Element, das rote Kästchen, befindet sich tatsächlich rechts und nicht mehr links. Das
können Sie also auch
tun. Lassen Sie mich jedoch zur Reihe zurückkehren. Das ist das erste, was Sie tun können.
Eine weitere wichtige Sache bei Flexbox ist die Größe der untergeordneten Elemente. Hier habe ich jedem
untergeordneten Element eine Breite und Höhe von 100 gegeben.
Wenn wir nun diese Breite und Höhe für jedes untergeordnete Element entfernen würden, würden Sie sehen, dass wir hier jetzt eine sehr
kleine Reihe haben, da jede Box jetzt nur so breit ist, wie es das Kind erfordert, und nur so groß
wie das Kind erfordert es, also ist jede Box hier,
die eine Nummer enthält, nur so breit und hoch wie die Nummer, die sie enthält.
Jetzt können Sie dies auch mit dem umgebenden Flexbox-Container ändern. Geben wir eine Breite von beispielsweise 300 Pixel
oder 80% der übergeordneten Breite an. In diesem Fall also, da
es sich um das Stammelement der Gerätebreite handelt, geben wir eine Höhe von beispielsweise 300
Pixel an.
Wenn wir das tun und jetzt wirklich wichtig, mache ich das in der Ansicht, die all diese Boxen enthält,
ich mache es nicht in den Boxen selbst.
Wenn wir also diese Breite und Höhe der umgebenden Box zuweisen, sehen Sie etwas Interessantes.
Die Höhe wird für alle Elemente angenommen. Jetzt
nehmen alle Ansichten in der Flexbox die Höhe des übergeordneten Elements an. Die Breite hat hier keinen Einfluss.
Das ist auch ein Standardverhalten, das Sie hier haben, offensichtlich, da wir nichts geändert haben.
Das Standardverhalten hier ist in der Tat, dass die untergeordneten Elemente in einer Flexbox,
also in dieser Außenansicht hier, so organisiert sind, dass sie sich durch Strecken entlang der Querachse ausrichten.
Okay, das waren viele Begriffe, was bedeutet das? Wenn wir jetzt mit
Flexbox arbeiten, haben wir zwei wichtige Achsen. Die Hauptachse hängt von Ihrer Flexrichtung ab. Für eine Reihe, die
wir hier haben, ist die Hauptachse von links nach rechts. Für die Zeilenumkehr wäre es von rechts nach links, für die Spalte wäre es
von oben nach unten und für die Spaltenumkehr wäre es von unten nach oben, das ist
also die Hauptachse und dann
haben Sie auch eine Querachse und das ist einfach das Gegenteil der Hauptachse.
Für eine Reihe, in der die Hauptachse von links nach rechts verläuft, ist die Querachse also von oben nach unten. Wenn die Hauptachse von rechts nach links verläuft,
was bei der Zeilenumkehr der Fall wäre, wäre die Querachse von unten
nach oben.
Okay, das ist das Konzept der Hauptachse und der Querachse.
Jetzt können Sie Ihre untergeordneten Elemente organisieren. In dieser Ansicht, in der die drei Felder als untergeordnete Elemente angezeigt
werden, können Sie diese untergeordneten Elemente entlang dieser Achse organisieren. Sie verwenden den Ausrichtungsinhalt, um Elemente entlang
der Hauptachse zu organisieren, und Sie haben Elemente ausgerichtet, um Elemente um die Querachse zu organisieren.
Jetzt sehen Sie hier die Werte, die Sie für die Begründung von Inhalten erhalten haben, wenn Sie
diese Anführungszeichen hinzufügen oder wenn Sie den Cursor dort platzieren und die Kontrolltaste drücken. Sie sehen, Sie können Elemente zentrieren, Sie
können sie am Ende oder am Anfang dieses Containers positionieren oder Sie können dazwischen etwas
Leerzeichen hinzufügen.
Wenn wir beispielsweise zwischen hier Leerzeichen verwenden und die Elementmitte ausrichten verwenden, ändern sich die Dinge.
Jetzt werden Sie sehen, dass dort die Breite des umgebenden Containers genommen wird. Jede
Box selbst ist immer noch ziemlich klein, aber sie ist geteilt oder über die Breite des übergeordneten
Containers verteilt und sie nehmen nicht mehr die Höhe, weil entlang des Kreuzes Achse, wir richten sie mit
Ausrichtungselementen aus und dort setze ich dies auf Mitte.
Die Standardeinstellung hier ist Dehnen. Wenn ich es auf Dehnen zurücksetze, dehnen sie sich nicht überraschend über
die gesamte Höhe.
Wenn Sie nun sicherstellen möchten, dass sie die verfügbare Breite annehmen, können Sie hier keine Dehnung festlegen,
um den Inhalt zu rechtfertigen, der Ihr Fahrzeug zur Positionierung der Hauptachse ist. Daher können Sie hier keine Dehnung festlegen.
Was können Sie dann tun?
Nun, das ist etwas, das Sie jetzt für jedes untergeordnete Element selbst konfigurieren.
Sie können einem untergeordneten Element mitteilen, wie viel Speicherplatz es möglicherweise von dem Speicherplatz nehmen soll, den es möglicherweise erhält. Dehnen ist hier eine Art Sonderfall. Dort richten Sie dies für
das übergeordnete Element ein. Normalerweise richten Sie dies für
das untergeordnete Element ein.
Wenn ich dies zum Beispiel jetzt auf "Zentrieren" setze, damit die Eltern dem Kind nicht mitteilen,
wie viel Platz es einnehmen soll, können wir den Platz, den ein Kind einnimmt, vollständig steuern, indem wir zum
untergeordneten Stil wechseln. Dort können Sie Flex hinzufügen , die Flex-Eigenschaft. Die Flex-Eigenschaft wird auf Elemente angewendet, die sich innerhalb einer Flexbox befinden,
also in diesem Fall innerhalb einer
Ansicht. Dies kann eine Ansicht selbst sein, dies kann jedoch auch eine andere Komponente wie beispielsweise
ein Text sein.
Jetzt können Sie hier Flex hinzufügen und diesen Wert beispielsweise auf Eins setzen.
Flex muss also eine Zahl sein. Wenn Sie dies auf eins setzen, werden
Sie sehen, dass der rote Container, in dem ich flex auf 1 gesetzt habe, jetzt die gesamte verfügbare Breite einnimmt, die er so viel
bekommen kann, dass er genug Platz für den blauen und den grünen Container lässt, damit sie können ihren Inhalt
in die umgebende Flexbox drücken.
Jetzt können wir die Grenzen des umgebenden Containers nicht sehen, aber die Grenzen wären im Wesentlichen dort, wo das rote
Element beginnt und das grüne Element und so weiter auf der horizontalen Achse hier.
Jetzt stellt flex one sicher, dass der rote Gegenstand so groß wie möglich wird, sodass
er so viel Platz wie möglich beansprucht. Standardmäßig nehmen Ansichten nur so viel Platz ein, wie ihre untergeordneten
Elemente
benötigen. Da dieses eine Zeichen erforderlich ist, ändern Sie dies jedoch mit Flex. Sie ändern dies und sie nehmen jetzt so viel Platz entlang
der Hauptachse ein, also
entlang der Breite hier, wie sie können bekommen. Auch für die Querachse ist dies
ein Sonderfall. Sie müssen dies für die übergeordnete Achse tun. Für die Hauptachse und da wir hier
eine Reihe haben, ist die Hauptachse eine horizontale Achse von links nach rechts. Sie tun
dies mit der Eigenschaft flex für ein untergeordnetes Element.
Jetzt können Sie natürlich auch anderen untergeordneten Elementen Flex hinzufügen, z. B. die Sekunde neben dem blauen
Container mit den beiden
darin. Sie können dort auch Flex hinzufügen.
Jetzt habe ich Flex One auf dem roten Container und Flex
One auf dem blauen Container. Was jetzt passiert, ist, dass beide den verfügbaren freien Speicherplatz belegen. Unter diesen beiden
Boxen ist der Speicherplatz gleichmäßig verteilt, und genau das gibt diese Zahl hier an.
Diese Nummer ist eine
relative Nummer, alle Elemente in derselben Flexbox, wobei die Eigenschaft flex den verfügbaren Speicherplatz unter Berücksichtigung
der hier zugewiesenen Nummer verteilt und diese Nummern relativ zueinander sind.
Wenn ich dem blauen Container hier also zwei Flex gebe, bedeutet dies, dass der blaue Container nach Abzug des
verfügbaren Platzes in dem umgebenden Container nach Abzug des Platzes, den jedes Element benötigt, um seinen Inhalt
dort
hineinzuquetschen, doppelt so viel Platz benötigt wie Dieses hier, weil wir hier Flex eins haben,
hier haben wir Flex
zwei, wenn wir hier Flex drei hätten, würde dies drei Fünftel des verfügbaren freien Speicherplatzes beanspruchen, weil wir drei
plus zwei haben, also
haben wir sozusagen 5 verfügbare Segmente und hier würde der rote Behälter 3 Segmente aufnehmen, der blaue
Behälter würde 2 Segmente aufnehmen.
Wenn wir 1 und 2 haben, haben wir drei verfügbare Segmente und der blaue Container nimmt
zwei davon, der rote nimmt eins, also addieren Sie immer diese Flex-Zahlen und verteilen sie dann oder das wird natürlich
automatisch gemacht, aber dann wird der verfügbare Platz verteilt entsprechend.
Jetzt sehen wir hier, dass der blaue Container doppelt so groß ist wie der rote oder doppelt
so viel freien Speicherplatz benötigt wie der rote.
Auf diese Weise können
Sie mit Flex arbeiten, die Positionierung von Elementen in Flex-Richtung, die Ausrichtung von Inhalten und die
Ausrichtung von Elementen organisieren und mithilfe von Flex Ihre Elemente vergrößern und verkleinern.
Nun, das ist eine kurze Einführung in Flexbox in React Native, wie ich bereits
sagte, inspiriert von Flexbox für CSS. Wenn Sie das wüssten, ist alles, was ich hier erklärt habe, wahrscheinlich nicht
neu für Sie.
Wir werden in diesem Kurs mit Flexbox
arbeiten, damit auch die Dinge klarer werden und wir viel damit arbeiten. Sie werden
sehen, wie Sie mit Flexbox schöne Benutzeroberflächen erstellen können. Flexbox ist am Ende das Tool in React Native, um Ihren Inhalt
auf einer Seite zu strukturieren, um Ihren Inhalt zu organisieren, und Sie werden in der Regel mit vielen
Ansichten arbeiten, die Sie auch ineinander verschachteln, damit Sie Elemente natürlich so positionieren können, wie Sie
es möchten, und das
ist auch wichtig, Sie tun es nicht Sie müssen nicht nur eine Ansicht in Ihrer App haben,
die Flexbox verwendet, sondern auch eine andere Ansicht, in der auch Flexbox verwendet wird. Wie
bereits erwähnt, verwendet jede Ansicht standardmäßig Flexbox, und Sie können diese Ansichten dann ineinander verschachteln Sie positionieren alles so,
wie Sie es möchten, und Sie werden dies auch bereits in
diesem Modul sehen, und tatsächlich mache ich es bereits hier. In meinen Ansichten hier, die sich in der umgebenden
Ansicht befinden, also in meinen Feldern hier, verwende ich auch Begründungsinhalte und richte Elemente aus, um meine Zahlen in
diesen Feldern zu zentrieren, sodass 1, 2 und 3 dort horizontal und vertikal zentriert sind und das funktioniert,
weil Wir haben die Flexbox standardmäßig aktiviert und können sie übrigens nicht deaktivieren. Daher verwende ich diese beiden Eigenschaften hier,
um meinen Inhalt dieser Ansicht entlang der Haupt- und der Querachse auszurichten, und hier, da ich keinen speziellen Flex festgelegt habe In dieser
Richtung ist die Hauptachse von oben nach unten, da die Standardflexrichtung die Spalte und die Querachse von
links nach rechts ist.
Das ist nur eine Randnotiz.