1 00:00:02,230 --> 00:00:08,100 In diesem Vortrag möchte ich etwas tiefer in die Flexbox eintauchen, insbesondere in Bezug darauf, wie Sie sie in React Native-Apps 2 00:00:08,110 --> 00:00:08,690 verwenden. 3 00:00:08,710 --> 00:00:12,310 Wenn Sie bereits alles darüber wissen, können Sie diese Vorlesung natürlich überspringen. 4 00:00:12,340 --> 00:00:14,920 Deshalb habe ich eine einfache Dummy-Anwendung vorbereitet, und natürlich finden Sie im 5 00:00:14,920 --> 00:00:20,420 Anhang eine normale React Native-App, die mit expo und in der App erstellt wurde. js Datei hier, was ich am Ende 6 00:00:20,460 --> 00:00:26,890 habe, ist nur eine Ansicht mit drei Ansichten dort, wo jede Ansicht dann einen Text mit Text eins, 7 00:00:26,890 --> 00:00:29,990 zwei, drei hat, dies schafft einfach einige Felder 8 00:00:30,010 --> 00:00:36,310 mit verschiedenen Farben - rot, blau und grün und jetzt Wir werden Flexbox verwenden, um diese Boxen 9 00:00:36,310 --> 00:00:41,950 zu verschieben, damit Sie ein Gefühl dafür bekommen, wie Flexbox funktioniert, weil es so wichtig ist. 10 00:00:42,240 --> 00:00:43,240 Das Wichtigste 11 00:00:43,660 --> 00:00:49,120 zuerst: Standardmäßig verwendet jede Ansicht in React Native, auch wenn Sie keine 12 00:00:49,120 --> 00:00:55,410 speziellen Stile zuweisen, Flexbox. Dies unterscheidet sich beispielsweise vom Web. Wenn Sie ein Div 13 00:00:55,420 --> 00:01:01,370 haben, das einer Ansicht entspricht, funktioniert dies nicht Flexbox wird standardmäßig nicht verwendet. 14 00:01:01,450 --> 00:01:08,260 In React Native organisiert jede Ansicht standardmäßig ihre untergeordneten Elemente mithilfe dieser Flexbox-Sache. Flexbox ist 15 00:01:08,350 --> 00:01:15,490 einfach ein Begriff, ein Konzept aus CSS, bei dem es darum geht, untergeordnete Elemente in einem 16 00:01:15,520 --> 00:01:17,440 eindimensionalen Raum zu organisieren 17 00:01:17,440 --> 00:01:21,990 zum Beispiel in einer Spalte. Dies ist auch eine andere 18 00:01:21,990 --> 00:01:29,340 Standardeinstellung. Standardmäßig verwendet nicht jede Ansicht die Flexbox, sondern organisiert standardmäßig untergeordnete Elemente in einer Spalte, also 19 00:01:29,340 --> 00:01:33,020 von oben nach unten. Das ist auch ein Unterschied zum 20 00:01:33,020 --> 00:01:37,350 Web, und ich möchte diese Unterschiede nicht zu sehr hervorheben, da Sie natürlich kein Webentwickler sein 21 00:01:37,350 --> 00:01:42,400 müssen, um React Native-Apps zu erstellen, aber ich denke, viele Leute kennen sich mit Webentwicklung aus kennen CSS Flexbox und 22 00:01:42,400 --> 00:01:47,400 daher ist es sinnvoll, auch über die Unterschiede zu sprechen. Wenn Sie im Web Flexbox verwenden, ist 23 00:01:47,400 --> 00:01:48,840 es nicht nur 24 00:01:48,840 --> 00:01:51,220 nicht standardmäßig aktiviert. Wenn Sie es 25 00:01:51,240 --> 00:01:56,820 aktivieren, werden standardmäßig alle untergeordneten Elemente in einer Reihe organisiert, und hier werden sie standardmäßig 26 00:01:56,820 --> 00:01:59,010 in einer Zeile organisiert Säule. 27 00:01:59,010 --> 00:02:05,910 Sie können diese Standardeinstellung jedoch ändern. In diesem Fall sehen Sie in der Ansicht, in der sich meine Felder befinden, 28 00:02:05,910 --> 00:02:12,960 indem Sie hier die Flexrichtung hinzufügen und diese beispielsweise auf Zeile setzen, dass diese drei Felder in einer Reihe von links 29 00:02:12,960 --> 00:02:16,560 nach rechts angeordnet sind. Jetzt haben Sie neben Zeile 30 00:02:16,560 --> 00:02:19,250 und Spalte auch Zeilenumkehr und Spaltenumkehr und dies macht 31 00:02:19,260 --> 00:02:21,720 einfach auch das, was der Name impliziert. 32 00:02:21,720 --> 00:02:29,010 Jetzt haben wir noch eine Reihe, aber das erste Element, das rote Kästchen, befindet sich tatsächlich rechts und nicht mehr links. Das 33 00:02:29,010 --> 00:02:30,820 können Sie also auch 34 00:02:30,840 --> 00:02:36,210 tun. Lassen Sie mich jedoch zur Reihe zurückkehren. Das ist das erste, was Sie tun können. 35 00:02:36,210 --> 00:02:42,750 Eine weitere wichtige Sache bei Flexbox ist die Größe der untergeordneten Elemente. Hier habe ich jedem 36 00:02:42,810 --> 00:02:47,040 untergeordneten Element eine Breite und Höhe von 100 gegeben. 37 00:02:47,070 --> 00:02:54,660 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 38 00:02:54,660 --> 00:03:01,890 kleine Reihe haben, da jede Box jetzt nur so breit ist, wie es das Kind erfordert, und nur so groß 39 00:03:01,890 --> 00:03:05,700 wie das Kind erfordert es, also ist jede Box hier, 40 00:03:05,700 --> 00:03:11,180 die eine Nummer enthält, nur so breit und hoch wie die Nummer, die sie enthält. 41 00:03:11,340 --> 00:03:18,180 Jetzt können Sie dies auch mit dem umgebenden Flexbox-Container ändern. Geben wir eine Breite von beispielsweise 300 Pixel 42 00:03:18,330 --> 00:03:22,740 oder 80% der übergeordneten Breite an. In diesem Fall also, da 43 00:03:22,740 --> 00:03:28,950 es sich um das Stammelement der Gerätebreite handelt, geben wir eine Höhe von beispielsweise 300 44 00:03:29,020 --> 00:03:30,230 Pixel an. 45 00:03:30,480 --> 00:03:36,720 Wenn wir das tun und jetzt wirklich wichtig, mache ich das in der Ansicht, die all diese Boxen enthält, 46 00:03:36,720 --> 00:03:39,380 ich mache es nicht in den Boxen selbst. 47 00:03:39,480 --> 00:03:45,050 Wenn wir also diese Breite und Höhe der umgebenden Box zuweisen, sehen Sie etwas Interessantes. 48 00:03:45,150 --> 00:03:48,250 Die Höhe wird für alle Elemente angenommen. Jetzt 49 00:03:48,270 --> 00:03:54,810 nehmen alle Ansichten in der Flexbox die Höhe des übergeordneten Elements an. Die Breite hat hier keinen Einfluss. 50 00:03:54,870 --> 00:03:59,510 Das ist auch ein Standardverhalten, das Sie hier haben, offensichtlich, da wir nichts geändert haben. 51 00:03:59,760 --> 00:04:06,840 Das Standardverhalten hier ist in der Tat, dass die untergeordneten Elemente in einer Flexbox, 52 00:04:06,850 --> 00:04:15,360 also in dieser Außenansicht hier, so organisiert sind, dass sie sich durch Strecken entlang der Querachse ausrichten. 53 00:04:15,490 --> 00:04:20,510 Okay, das waren viele Begriffe, was bedeutet das? Wenn wir jetzt mit 54 00:04:20,530 --> 00:04:29,290 Flexbox arbeiten, haben wir zwei wichtige Achsen. Die Hauptachse hängt von Ihrer Flexrichtung ab. Für eine Reihe, die 55 00:04:29,350 --> 00:04:37,690 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 56 00:04:37,690 --> 00:04:42,570 von oben nach unten und für die Spaltenumkehr wäre es von unten nach oben, das ist 57 00:04:42,580 --> 00:04:44,270 also die Hauptachse und dann 58 00:04:44,620 --> 00:04:48,630 haben Sie auch eine Querachse und das ist einfach das Gegenteil der Hauptachse. 59 00:04:48,640 --> 00:04:56,110 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, 60 00:04:56,110 --> 00:05:01,900 was bei der Zeilenumkehr der Fall wäre, wäre die Querachse von unten 61 00:05:01,900 --> 00:05:03,100 nach oben. 62 00:05:03,340 --> 00:05:06,940 Okay, das ist das Konzept der Hauptachse und der Querachse. 63 00:05:06,940 --> 00:05:13,060 Jetzt können Sie Ihre untergeordneten Elemente organisieren. In dieser Ansicht, in der die drei Felder als untergeordnete Elemente angezeigt 64 00:05:13,360 --> 00:05:20,170 werden, können Sie diese untergeordneten Elemente entlang dieser Achse organisieren. Sie verwenden den Ausrichtungsinhalt, um Elemente entlang 65 00:05:20,200 --> 00:05:27,760 der Hauptachse zu organisieren, und Sie haben Elemente ausgerichtet, um Elemente um die Querachse zu organisieren. 66 00:05:27,760 --> 00:05:31,040 Jetzt sehen Sie hier die Werte, die Sie für die Begründung von Inhalten erhalten haben, wenn Sie 67 00:05:31,090 --> 00:05:37,230 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 68 00:05:37,230 --> 00:05:44,040 können sie am Ende oder am Anfang dieses Containers positionieren oder Sie können dazwischen etwas 69 00:05:44,040 --> 00:05:45,270 Leerzeichen hinzufügen. 70 00:05:45,300 --> 00:05:52,500 Wenn wir beispielsweise zwischen hier Leerzeichen verwenden und die Elementmitte ausrichten verwenden, ändern sich die Dinge. 71 00:05:52,500 --> 00:05:57,490 Jetzt werden Sie sehen, dass dort die Breite des umgebenden Containers genommen wird. Jede 72 00:05:57,540 --> 00:06:03,360 Box selbst ist immer noch ziemlich klein, aber sie ist geteilt oder über die Breite des übergeordneten 73 00:06:03,360 --> 00:06:09,570 Containers verteilt und sie nehmen nicht mehr die Höhe, weil entlang des Kreuzes Achse, wir richten sie mit 74 00:06:09,570 --> 00:06:12,960 Ausrichtungselementen aus und dort setze ich dies auf Mitte. 75 00:06:13,020 --> 00:06:19,620 Die Standardeinstellung hier ist Dehnen. Wenn ich es auf Dehnen zurücksetze, dehnen sie sich nicht überraschend über 76 00:06:19,620 --> 00:06:20,960 die gesamte Höhe. 77 00:06:20,970 --> 00:06:26,490 Wenn Sie nun sicherstellen möchten, dass sie die verfügbare Breite annehmen, können Sie hier keine Dehnung festlegen, 78 00:06:26,490 --> 00:06:32,820 um den Inhalt zu rechtfertigen, der Ihr Fahrzeug zur Positionierung der Hauptachse ist. Daher können Sie hier keine Dehnung festlegen. 79 00:06:32,980 --> 00:06:35,880 Was können Sie dann tun? 80 00:06:35,890 --> 00:06:40,780 Nun, das ist etwas, das Sie jetzt für jedes untergeordnete Element selbst konfigurieren. 81 00:06:40,810 --> 00:06:50,290 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 82 00:06:50,290 --> 00:06:54,220 das übergeordnete Element ein. Normalerweise richten Sie dies für 83 00:06:54,220 --> 00:06:56,640 das untergeordnete Element ein. 84 00:06:56,680 --> 00:07:02,200 Wenn ich dies zum Beispiel jetzt auf "Zentrieren" setze, damit die Eltern dem Kind nicht mitteilen, 85 00:07:02,200 --> 00:07:08,950 wie viel Platz es einnehmen soll, können wir den Platz, den ein Kind einnimmt, vollständig steuern, indem wir zum 86 00:07:08,950 --> 00:07:17,410 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, 87 00:07:17,410 --> 00:07:19,730 also in diesem Fall innerhalb einer 88 00:07:19,810 --> 00:07:25,660 Ansicht. Dies kann eine Ansicht selbst sein, dies kann jedoch auch eine andere Komponente wie beispielsweise 89 00:07:25,660 --> 00:07:27,150 ein Text sein. 90 00:07:27,160 --> 00:07:31,320 Jetzt können Sie hier Flex hinzufügen und diesen Wert beispielsweise auf Eins setzen. 91 00:07:31,330 --> 00:07:35,940 Flex muss also eine Zahl sein. Wenn Sie dies auf eins setzen, werden 92 00:07:35,950 --> 00:07:44,050 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 93 00:07:44,110 --> 00:07:50,440 bekommen kann, dass er genug Platz für den blauen und den grünen Container lässt, damit sie können ihren Inhalt 94 00:07:50,620 --> 00:07:52,470 in die umgebende Flexbox drücken. 95 00:07:52,480 --> 00:07:58,360 Jetzt können wir die Grenzen des umgebenden Containers nicht sehen, aber die Grenzen wären im Wesentlichen dort, wo das rote 96 00:07:58,600 --> 00:08:03,060 Element beginnt und das grüne Element und so weiter auf der horizontalen Achse hier. 97 00:08:04,720 --> 00:08:11,020 Jetzt stellt flex one sicher, dass der rote Gegenstand so groß wie möglich wird, sodass 98 00:08:11,170 --> 00:08:17,140 er so viel Platz wie möglich beansprucht. Standardmäßig nehmen Ansichten nur so viel Platz ein, wie ihre untergeordneten 99 00:08:17,140 --> 00:08:17,690 Elemente 100 00:08:17,710 --> 00:08:24,040 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 101 00:08:24,040 --> 00:08:25,140 der Hauptachse ein, also 102 00:08:25,150 --> 00:08:29,140 entlang der Breite hier, wie sie können bekommen. Auch für die Querachse ist dies 103 00:08:29,140 --> 00:08:34,310 ein Sonderfall. Sie müssen dies für die übergeordnete Achse tun. Für die Hauptachse und da wir hier 104 00:08:34,360 --> 00:08:38,790 eine Reihe haben, ist die Hauptachse eine horizontale Achse von links nach rechts. Sie tun 105 00:08:38,800 --> 00:08:41,520 dies mit der Eigenschaft flex für ein untergeordnetes Element. 106 00:08:42,700 --> 00:08:48,550 Jetzt können Sie natürlich auch anderen untergeordneten Elementen Flex hinzufügen, z. B. die Sekunde neben dem blauen 107 00:08:48,550 --> 00:08:50,260 Container mit den beiden 108 00:08:50,260 --> 00:08:52,420 darin. Sie können dort auch Flex hinzufügen. 109 00:08:52,420 --> 00:08:56,690 Jetzt habe ich Flex One auf dem roten Container und Flex 110 00:08:56,710 --> 00:09:03,790 One auf dem blauen Container. Was jetzt passiert, ist, dass beide den verfügbaren freien Speicherplatz belegen. Unter diesen beiden 111 00:09:03,790 --> 00:09:08,870 Boxen ist der Speicherplatz gleichmäßig verteilt, und genau das gibt diese Zahl hier an. 112 00:09:08,930 --> 00:09:11,210 Diese Nummer ist eine 113 00:09:11,210 --> 00:09:18,350 relative Nummer, alle Elemente in derselben Flexbox, wobei die Eigenschaft flex den verfügbaren Speicherplatz unter Berücksichtigung 114 00:09:18,410 --> 00:09:23,130 der hier zugewiesenen Nummer verteilt und diese Nummern relativ zueinander sind. 115 00:09:23,140 --> 00:09:29,800 Wenn ich dem blauen Container hier also zwei Flex gebe, bedeutet dies, dass der blaue Container nach Abzug des 116 00:09:29,950 --> 00:09:36,100 verfügbaren Platzes in dem umgebenden Container nach Abzug des Platzes, den jedes Element benötigt, um seinen Inhalt 117 00:09:36,100 --> 00:09:36,840 dort 118 00:09:36,970 --> 00:09:42,480 hineinzuquetschen, doppelt so viel Platz benötigt wie Dieses hier, weil wir hier Flex eins haben, 119 00:09:42,490 --> 00:09:43,760 hier haben wir Flex 120 00:09:43,810 --> 00:09:50,560 zwei, wenn wir hier Flex drei hätten, würde dies drei Fünftel des verfügbaren freien Speicherplatzes beanspruchen, weil wir drei 121 00:09:50,560 --> 00:09:52,150 plus zwei haben, also 122 00:09:52,210 --> 00:09:58,300 haben wir sozusagen 5 verfügbare Segmente und hier würde der rote Behälter 3 Segmente aufnehmen, der blaue 123 00:09:58,300 --> 00:09:59,950 Behälter würde 2 Segmente aufnehmen. 124 00:09:59,950 --> 00:10:05,950 Wenn wir 1 und 2 haben, haben wir drei verfügbare Segmente und der blaue Container nimmt 125 00:10:06,070 --> 00:10:13,510 zwei davon, der rote nimmt eins, also addieren Sie immer diese Flex-Zahlen und verteilen sie dann oder das wird natürlich 126 00:10:13,510 --> 00:10:17,680 automatisch gemacht, aber dann wird der verfügbare Platz verteilt entsprechend. 127 00:10:17,680 --> 00:10:22,660 Jetzt sehen wir hier, dass der blaue Container doppelt so groß ist wie der rote oder doppelt 128 00:10:22,660 --> 00:10:25,090 so viel freien Speicherplatz benötigt wie der rote. 129 00:10:25,090 --> 00:10:27,090 Auf diese Weise können 130 00:10:27,130 --> 00:10:33,760 Sie mit Flex arbeiten, die Positionierung von Elementen in Flex-Richtung, die Ausrichtung von Inhalten und die 131 00:10:33,790 --> 00:10:39,370 Ausrichtung von Elementen organisieren und mithilfe von Flex Ihre Elemente vergrößern und verkleinern. 132 00:10:39,430 --> 00:10:44,490 Nun, das ist eine kurze Einführung in Flexbox in React Native, wie ich bereits 133 00:10:44,560 --> 00:10:51,070 sagte, inspiriert von Flexbox für CSS. Wenn Sie das wüssten, ist alles, was ich hier erklärt habe, wahrscheinlich nicht 134 00:10:51,070 --> 00:10:52,280 neu für Sie. 135 00:10:52,450 --> 00:10:54,610 Wir werden in diesem Kurs mit Flexbox 136 00:10:54,610 --> 00:10:58,900 arbeiten, damit auch die Dinge klarer werden und wir viel damit arbeiten. Sie werden 137 00:10:58,930 --> 00:11:05,170 sehen, wie Sie mit Flexbox schöne Benutzeroberflächen erstellen können. Flexbox ist am Ende das Tool in React Native, um Ihren Inhalt 138 00:11:05,170 --> 00:11:10,570 auf einer Seite zu strukturieren, um Ihren Inhalt zu organisieren, und Sie werden in der Regel mit vielen 139 00:11:10,570 --> 00:11:15,190 Ansichten arbeiten, die Sie auch ineinander verschachteln, damit Sie Elemente natürlich so positionieren können, wie Sie 140 00:11:15,190 --> 00:11:16,720 es möchten, und das 141 00:11:16,840 --> 00:11:21,680 ist auch wichtig, Sie tun es nicht Sie müssen nicht nur eine Ansicht in Ihrer App haben, 142 00:11:21,730 --> 00:11:26,050 die Flexbox verwendet, sondern auch eine andere Ansicht, in der auch Flexbox verwendet wird. Wie 143 00:11:26,050 --> 00:11:31,570 bereits erwähnt, verwendet jede Ansicht standardmäßig Flexbox, und Sie können diese Ansichten dann ineinander verschachteln Sie positionieren alles so, 144 00:11:31,600 --> 00:11:35,070 wie Sie es möchten, und Sie werden dies auch bereits in 145 00:11:35,140 --> 00:11:41,200 diesem Modul sehen, und tatsächlich mache ich es bereits hier. In meinen Ansichten hier, die sich in der umgebenden 146 00:11:41,200 --> 00:11:47,710 Ansicht befinden, also in meinen Feldern hier, verwende ich auch Begründungsinhalte und richte Elemente aus, um meine Zahlen in 147 00:11:47,710 --> 00:11:54,070 diesen Feldern zu zentrieren, sodass 1, 2 und 3 dort horizontal und vertikal zentriert sind und das funktioniert, 148 00:11:54,070 --> 00:12:00,700 weil Wir haben die Flexbox standardmäßig aktiviert und können sie übrigens nicht deaktivieren. Daher verwende ich diese beiden Eigenschaften hier, 149 00:12:00,700 --> 00:12:08,320 um meinen Inhalt dieser Ansicht entlang der Haupt- und der Querachse auszurichten, und hier, da ich keinen speziellen Flex festgelegt habe In dieser 150 00:12:08,320 --> 00:12:14,170 Richtung ist die Hauptachse von oben nach unten, da die Standardflexrichtung die Spalte und die Querachse von 151 00:12:14,530 --> 00:12:16,420 links nach rechts ist. 152 00:12:16,420 --> 00:12:17,440 Das ist nur eine Randnotiz.