1 00:00:02,240 --> 00:00:04,430 Dies ist auch eine gute Übung für 2 00:00:04,460 --> 00:00:09,440 Sie. Sie können das Video hier anhalten und versuchen, diese beiden Tasten einzeln nebeneinander zu positionieren. Nur 3 00:00:09,440 --> 00:00:15,190 die beiden Tasten, nicht der Eingang und die beiden Tasten, aber diese beiden Tasten sollten sich in a befinden neue 4 00:00:15,200 --> 00:00:17,430 Zeile unter dem Eingang, aber dann nebeneinander sitzen. 5 00:00:17,570 --> 00:00:23,610 Nach der kurzen Pause, mit der Sie das Video pausieren können, machen wir das natürlich zusammen. 6 00:00:23,650 --> 00:00:25,440 Warst du erfolgreich? 7 00:00:25,450 --> 00:00:26,950 Lass es uns gemeinsam versuchen. 8 00:00:26,990 --> 00:00:34,670 Der Schlüssel hier ist die Verwendung von Flexbox und einer anderen Ansicht, da Ansichtskomponenten, wie bereits erwähnt und wie wichtig 9 00:00:34,670 --> 00:00:41,530 zu verstehen ist, Ihre Kernkomponente für die Organisation anderer Komponenten oder für die Verwendung als Container sind, den 10 00:00:41,530 --> 00:00:43,570 Sie aber auch hier 11 00:00:43,600 --> 00:00:49,610 gestalten können Fall, um andere Komponenten zu organisieren. Also werde ich die beiden Schaltflächen innerhalb 12 00:00:49,720 --> 00:00:55,720 dieser Ansicht verschieben und jetzt können wir dieser Ansicht einen Stil zuweisen. Dieser Stil wird 13 00:00:55,750 --> 00:00:59,660 natürlich hier in unserem Stilobjekt definiert und ich werde diesen 14 00:00:59,710 --> 00:01:06,400 Schaltflächencontainer benennen. Das liegt bei Ihnen. Unter diesem Namen und dort möchte ich eine flexible Richtung der 15 00:01:06,400 --> 00:01:13,360 Reihe festlegen, damit sie nebeneinander sitzen, und dann den Inhalt des Zwischenraums begründen, um den freien Platz 16 00:01:13,360 --> 00:01:16,330 zwischen den beiden Schaltflächen zu erhalten. 17 00:01:16,340 --> 00:01:25,190 Fügen wir nun den Stil hier zu dieser Ansicht hinzu, formatieren den Schaltflächencontainer und speichern diesen. Jetzt sind hier die Schaltflächen, 18 00:01:25,190 --> 00:01:32,420 aber damit der freie Speicherplatz hier einen Effekt hat, der auf Android übrigens noch deutlicher wird, dass 19 00:01:32,420 --> 00:01:34,900 er derzeit keinen hat Effekt, 20 00:01:35,000 --> 00:01:37,880 damit der Abstand dazwischen keinen Effekt 21 00:01:37,910 --> 00:01:41,820 hat, lassen Sie mich dies schnell auf Android zeigen. 22 00:01:42,030 --> 00:01:42,410 Sie 23 00:01:42,420 --> 00:01:43,890 sehen, es gibt keinen freien Speicherplatz. 24 00:01:43,920 --> 00:01:47,790 Der Grund dafür ist einfach, dass wir unserem Schaltflächencontainer keine Breite zugewiesen haben. Daher wird, wie 25 00:01:47,790 --> 00:01:48,200 Sie 26 00:01:48,210 --> 00:01:50,100 erfahren haben, nur die Breite der untergeordneten 27 00:01:50,370 --> 00:01:52,660 Elemente verwendet, und dies ist einfach die Breite der 28 00:01:52,710 --> 00:01:53,820 beiden Schaltflächen, die zusammen 29 00:01:53,940 --> 00:01:56,570 addiert werden. Daher gibt es keinen freien Speicherplatz für dazwischen hinzufügen. 30 00:01:56,610 --> 00:02:01,410 Dazwischen haben wir also etwas freien Speicherplatz. Wir müssen dem Schaltflächencontainer lediglich ein Mit zuweisen, und 31 00:02:01,530 --> 00:02:05,800 jetzt liegt die Breite natürlich bei Ihnen. Da der Eingang 80% hat, 32 00:02:05,820 --> 00:02:14,340 könnten wir auch hier mit 80% oder vielleicht mit 60% gehen, um ihn etwas schmaler als den obigen Eingang zu haben, so dass 33 00:02:14,400 --> 00:02:20,130 die Tasten nicht an den Rändern des Eingangs sitzen, aber das ist von Natürlich bis 34 00:02:20,130 --> 00:02:21,090 zu 35 00:02:21,090 --> 00:02:27,060 Ihnen und daher jetzt, wenn dies neu geladen wird und wir uns dies auf Android ansehen, 36 00:02:27,060 --> 00:02:33,390 indem wir diese bequeme Methode zum Schließen und Neustarten verwenden, sollten wir jetzt etwas freien Speicherplatz zwischen 37 00:02:33,390 --> 00:02:34,930 diesen beiden Schaltflächen sehen, 38 00:02:34,950 --> 00:02:36,730 ja, das sieht gut aus. 39 00:02:36,770 --> 00:02:38,700 Und natürlich können Sie damit 40 00:02:38,730 --> 00:02:42,830 herumspielen, Sie können den Schaltflächen auch alternativ Stile hinzufügen, Sie 41 00:02:42,840 --> 00:02:49,440 können auch hier Stil-Requisiten hinzufügen und links und rechts von jeder Schaltfläche einen Rand hinzufügen, der auch 42 00:02:49,440 --> 00:02:50,510 funktioniert hätte. 43 00:02:50,520 --> 00:02:56,250 Sie können hier auch mit anderen Werten herumspielen, z. B. mit Leerzeichen, um den freien Speicherplatz links und rechts von den 44 00:02:56,250 --> 00:02:58,710 Schaltflächen und nicht nur zwischen diesen zu haben. 45 00:02:58,770 --> 00:03:03,000 Dies sind alles Dinge, die Sie tun können. Ich werde hier mit dem Weltraum herumgehen und einen 46 00:03:03,000 --> 00:03:06,000 letzten Blick darauf werfen, aber letztendlich liegt das natürlich einfach bei Ihnen. 47 00:03:06,030 --> 00:03:11,400 Wichtig hierbei ist natürlich, dass Sie verstehen, wie Sie mit Hilfe einer Ansicht, die Sie dann um 48 00:03:11,550 --> 00:03:15,390 Ihre Tasten und Ihre Flexbox wickeln, etwas erreichen können, und damit würde 49 00:03:15,600 --> 00:03:18,900 ich sagen, dass wir hier einen anständigen Blick haben. 50 00:03:19,110 --> 00:03:26,550 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ß 51 00:03:26,550 --> 00:03:31,380 sind und ich denke, es würde ein bisschen schöner aussehen, wenn sie die gleiche Größe hätten. 52 00:03:31,410 --> 00:03:37,920 Jetzt können Sie auf einer Schaltfläche keine Stilstütze hinzufügen und keine Breite festlegen, unabhängig davon, ob 53 00:03:37,950 --> 00:03:40,700 Sie Inline-Stile oder das Stylesheet-Objekt 54 00:03:40,710 --> 00:03:44,050 verwenden. Daher müssen Sie wissen, weshalb ich sie 55 00:03:44,100 --> 00:03:51,860 hier behandele. Sie müssen Ihre Schaltfläche in eine separate Ansicht einbinden, wie ich es hier mache, und dieser Ansicht dann 56 00:03:52,070 --> 00:03:59,270 eine Schaltfläche zuweisen. Hier können wir beispielsweise Stile hinzufügen, die sich auf eine Schaltflächeneigenschaft dort unten, auf jede 57 00:03:59,270 --> 00:04:05,990 Ansicht und dort auf diese beziehen Schaltflächeneigenschaft, die ich jetzt hinzufüge, Sie könnten eine Breite von beispielsweise 58 00:04:05,990 --> 00:04:08,780 40% hinzufügen, und das sind 40% der 59 00:04:08,780 --> 00:04:15,440 übergeordneten Ansicht dieser Ansicht, also 40% der Ansicht des Schaltflächencontainers, die selbst 60% der gesamten verfügbaren Breite 60 00:04:16,220 --> 00:04:20,580 einnimmt und das können wir natürlich auch auf der anderen Schaltfläche. 61 00:04:20,600 --> 00:04:28,010 Das ist nur etwas, was Sie wissen müssen, wenn Sie Ihre Umgebungsansichten hier um Ihre Schaltflächen hinzufügen. 62 00:04:28,010 --> 00:04:34,490 Wenn wir nun Android neu starten, sollten wir gleich große Schaltflächen haben, was 63 00:04:34,580 --> 00:04:36,710 natürlich oft gewünscht wird. 64 00:04:36,710 --> 00:04:42,980 Natürlich hätten Sie hier auch einen Pixelwert anstelle von Prozentwerten verwenden können, aber jetzt bin ich wirklich glücklich. Ich 65 00:04:43,220 --> 00:04:44,710 denke, das ist 66 00:04:44,780 --> 00:04:48,590 jetzt wirklich eine App, die gut aussieht, sich gut verhält und ja, 67 00:04:48,710 --> 00:04:51,320 es ist ein guter Anfang mit React Native. 68 00:04:51,320 --> 00:04:57,140 Jetzt können wir natürlich noch so viel mehr lernen und wir werden uns mit so viel mehr befassen, was 69 00:04:57,140 --> 00:05:02,540 das Styling betrifft, denn wie bereits erwähnt, ist dies sicherlich nicht die schönste App, die Sie jemals erstellt 70 00:05:03,110 --> 00:05:05,990 haben, aber wir haben viele wichtige Grundlagen behandelt Hier.