1 00:00:02,230 --> 00:00:08,300 Wir haben also mit der Texteingabe begonnen. Im Moment machen wir nichts mit den Werten, die der Benutzer eingibt. 2 00:00:08,350 --> 00:00:14,020 Bevor wir dies tun, stellen wir sicher, dass sich die Schaltfläche nicht unter dieser Eingabe befindet, sondern 3 00:00:14,020 --> 00:00:15,520 rechts daneben und für 4 00:00:15,520 --> 00:00:17,700 Auch hier müssen wir am Layout arbeiten. 5 00:00:17,710 --> 00:00:21,970 Deshalb habe ich hier diese zusätzliche Ansicht um die Texteingabe in der Schaltfläche. 6 00:00:21,970 --> 00:00:27,490 Das würden wir nicht brauchen, aber jetzt können wir mit dieser verschachtelten Ansicht steuern, wie diese 7 00:00:27,490 --> 00:00:31,440 beiden Elemente zueinander ausgerichtet sind, indem wir hier und jetzt 8 00:00:31,660 --> 00:00:38,980 erneut die Stileigenschaft hinzufügen, um zu gestalten und Dinge zu positionieren. React Native verwendet Flexbox, die Sie möglicherweise auch verwenden Wenn 9 00:00:38,980 --> 00:00:45,050 Sie dies nicht tun, finden Sie im Anhang Ressourcen, die Ihnen den Einstieg in die CSS-Flexbox erleichtern. 10 00:00:45,220 --> 00:00:49,840 Sie müssen die Flexbox nicht in- und auswendig kennen, aber es ist hilfreich, 11 00:00:49,840 --> 00:00:56,590 ein wenig darüber zu wissen. Die Flexbox funktioniert so, dass Elemente innerhalb einer Ansicht nebeneinander oder übereinander positioniert werden, 12 00:00:56,800 --> 00:01:00,200 standardmäßig in React Native und übereinander Sie können dies ändern, 13 00:01:00,230 --> 00:01:06,460 indem Sie die Flex-Richtung von der Spalte festlegen, die die Standardeinstellung für die Zeile ist, und indem Sie 14 00:01:06,880 --> 00:01:12,610 diese hinzufügen. In dieser Ansicht überschreiben wir die Standardeinstellung, die die Standardeinstellung ist. Deshalb müssen wir 15 00:01:12,610 --> 00:01:18,430 sie jetzt nicht aus der Spalte entfernen Wir werden sehen, dass die Schaltfläche in der Texteingabe nebeneinander 16 00:01:18,430 --> 00:01:19,180 sitzt, 17 00:01:19,330 --> 00:01:26,100 noch nicht so gut aussieht, aber sie sitzen nebeneinander. Damit dies jetzt besser aussieht, können wir auch 18 00:01:26,130 --> 00:01:27,960 weitere hinzufügen. Sie 19 00:01:28,140 --> 00:01:34,300 können beispielsweise definieren, wie die Dinge in ihrer Zeile oder Spalte ausgerichtet und verteilt werden. 20 00:01:34,650 --> 00:01:41,700 Mit "Inhalt ausrichten" können Sie beispielsweise steuern, wie Elemente entlang ihrer Hauptachse verteilt werden, und mit Zeile 21 00:01:41,700 --> 00:01:45,410 ist die Hauptachse von links nach rechts. Wenn 22 00:01:45,480 --> 00:01:50,570 dies eine Spalte wäre, wäre die Hauptachse von oben nach unten. 23 00:01:50,630 --> 00:01:57,980 Jetzt können wir also einen Wert angeben, und hier gibt mir meine IDE sogar eine automatische Vervollständigung, was sehr praktisch ist. 24 00:01:58,130 --> 00:02:05,210 Wir können beispielsweise einen Wert für den Abstand zwischen angeben. Dies bedeutet, dass sich der gesamte verbleibende freie Speicherplatz zwischen 25 00:02:05,210 --> 00:02:07,690 den beiden Elementen befindet, sodass sie jetzt 26 00:02:07,760 --> 00:02:12,560 nicht direkt nebeneinander sitzen, sondern zwischen ihnen, wie Sie sehen können, ein freier Speicherplatz 27 00:02:12,560 --> 00:02:13,590 vorhanden ist. 28 00:02:14,590 --> 00:02:18,010 Jetzt können wir sie auch auf ihrer 29 00:02:18,060 --> 00:02:23,950 Querachse ausrichten, sodass die Hauptachse für die Flexrichtungsreihe von links nach rechts war und 30 00:02:23,950 --> 00:02:31,130 die Querachse dann von oben nach unten ist. Bei einer Spalte mit flexibler Richtung wäre die Hauptachse von oben nach unten und die 31 00:02:31,130 --> 00:02:32,220 Querachse von links nach 32 00:02:32,270 --> 00:02:38,750 rechts, so dass die Querachse sozusagen einfach das Gegenteil der Hauptachse ist. Richten Sie Inhaltspositionen entlang der Hauptachse 33 00:02:38,750 --> 00:02:46,910 aus. Mit Ausrichtungselementen können Sie steuern, wie die untergeordneten Elemente dieser Ansicht entlang der Querachse ausgerichtet 34 00:02:46,910 --> 00:02:51,670 werden. Dort haben Sie unterschiedliche Werte, z. B. Mitte. 35 00:02:51,980 --> 00:02:58,250 In diesem Fall sollten alle Elemente vertikal zentriert werden, da wir eine Flex-Richtungszeile haben. Dies bedeutet, dass die Schaltfläche jetzt 36 00:02:58,250 --> 00:03:05,230 besser aussieht und einfach in der Mitte dieser Eingabe zentriert ist. Nun, und jetzt können wir auch die Breite 37 00:03:05,230 --> 00:03:10,150 dieser Eingabe ein wenig erhöhen, indem wir zur Texteingabe gehen. Dort können 38 00:03:10,150 --> 00:03:17,050 wir im Stil auch eine Breite von beispielsweise 200 hinzufügen, um eine Breite von 200 Pixel zu 39 00:03:17,050 --> 00:03:24,170 erhalten, was bedeutet, dass das ist jetzt etwas größer. Alternativ könnten Sie auch einen Prozentwert wie 80% 40 00:03:24,560 --> 00:03:30,830 wählen, was bedeutet, dass 80% der verfügbaren Breite benötigt werden, die von der übergeordneten Komponente 41 00:03:30,890 --> 00:03:38,180 bereitgestellt wird, also von der Ansicht, die sie umgibt. Und jetzt haben wir uns die ersten wichtigen Grundlagen angesehen, 42 00:03:38,450 --> 00:03:44,720 wie man Dinge in React Native auslegt und Dinge stylt, aber im Moment machen wir das alles mit diesem 43 00:03:44,720 --> 00:03:51,040 Konzept, das Inline-Stile genannt wird, was bedeutet, dass wir es einrichten die Stile direkt auf den Elementen und das 44 00:03:51,050 --> 00:03:52,250 ist nicht ideal.