1 00:00:02,400 --> 00:00:09,500 Wenn wir nun zum nächsten Bildschirm gehen, auf dem wir ein laufendes Spiel haben, stehen wir dort vor dem nächsten 2 00:00:09,520 --> 00:00:10,610 Problem. Im 3 00:00:10,610 --> 00:00:15,680 Hochformat sieht es gut aus, aber wenn wir das Gerät drehen, sieht es nicht besonders gut aus. 4 00:00:15,680 --> 00:00:20,520 Hier könnte eine Lösung einfach darin bestehen, dass wir das Styling ein wenig ändern, wenn 5 00:00:20,570 --> 00:00:23,320 wir nicht so viel Höhe zur Verfügung haben. 6 00:00:23,420 --> 00:00:28,150 Alternativ rendern wir ein völlig anderes Layout, basierend auf dem verfügbaren Speicherplatz. Beide 7 00:00:28,220 --> 00:00:30,470 Optionen stehen Ihnen zur Verfügung. 8 00:00:30,470 --> 00:00:36,920 Sie könnten zum Beispiel versuchen, dies nebeneinander zu rendern, indem Sie einfach einen if-Check hier in Ihrem Spielbildschirm 9 00:00:36,920 --> 00:00:42,620 hinzufügen, in dem Sie einen völlig anderen jsx-Code und möglicherweise auch ein völlig anderes Design und 10 00:00:42,620 --> 00:00:49,820 damit ein anderes Layout basierend auf der verfügbaren Breite oder Höhe und dann zurückgeben Sie müssten lediglich einen Listener einrichten, der 11 00:00:49,820 --> 00:00:51,200 Ihre Komponente neu 12 00:00:51,200 --> 00:00:56,150 rendert. Mit der festgelegten Phase, wie wir es hier auf dem Startbildschirm getan haben, 13 00:00:56,150 --> 00:01:02,560 können Sie Ihre Komponente in jedem Fall neu rendern. Ich denke, das wäre irgendwie interessant und deshalb werde ich das hier tun. 14 00:01:02,570 --> 00:01:08,740 Ich möchte meine Schaltflächen hier links und rechts vom Nummerncontainer rendern, wenn nur eine begrenzte 15 00:01:08,740 --> 00:01:13,370 Höhe verfügbar ist, und sie wie immer rendern, wenn dies nicht 16 00:01:13,390 --> 00:01:15,160 der Fall ist. 17 00:01:15,460 --> 00:01:20,560 Daher möchte ich basierend auf meinen Abmessungen einen völlig anderen JSX-Code rendern. 18 00:01:20,560 --> 00:01:30,540 Also füge ich hier eine if-Prüfung hinzu und sage, ob die Abmessungen die Fensterhöhe erhalten. Sagen wir, wenn diese kleiner als 500 19 00:01:30,670 --> 00:01:33,850 ist und wir sehen, ob dieser 20 00:01:33,850 --> 00:01:37,770 Wert funktioniert. Dann möchte ich im Grunde diesen 21 00:01:37,860 --> 00:01:47,770 jsx-Code von dort unten zurückgeben, also ' Ich kopiere das, setze es hier in Klammern, Klammern, aber ich möchte meine Karte nicht 22 00:01:47,770 --> 00:01:55,390 hier haben, stattdessen habe ich den ersten Hauptknopf vor meinem Nummerncontainer, den nächsten nach dem Nummerncontainer und 23 00:01:55,390 --> 00:01:59,530 ich habe alle davon in einer neuen Ansicht hier, 24 00:02:02,410 --> 00:02:09,000 die ich hier umwickeln werde, die diese drei Dinge in einer Reihe auslegen sollte. 25 00:02:09,010 --> 00:02:16,180 Also werde ich hier einen brandneuen Stil hinzufügen, Stile, sagen wir Steuerelemente oder wie auch immer Sie ihn benennen möchten, 26 00:02:16,300 --> 00:02:21,400 und jetzt füge ich dies meinem Stylesheet hier hinzu und das ist das gleiche 27 00:02:21,400 --> 00:02:27,460 Stylesheet wie zuvor, weil es nur Stile einrichtet, die ich überall verwenden kann Komponente, egal unter welchen 28 00:02:27,460 --> 00:02:31,540 Bedingungen ich was rendere und hier werde ich diese Flex-Richtung 29 00:02:31,540 --> 00:02:38,890 auf Zeile setzen, die Standardeinstellung ist Spalte und jetzt möchten wir hier eine Zeile haben und ich werde den begründeten Inhalt 30 00:02:39,070 --> 00:02:48,360 auf Leerzeichen setzen und wir werden sehen, wie das sieht aus wie. Wenn wir dies jetzt speichern und hier im Querformat ein neues Spiel starten, sieht es nicht 31 00:02:48,390 --> 00:02:49,470 schlecht aus, es 32 00:02:49,470 --> 00:02:54,690 gibt noch einiges zu tun, aber das bekomme ich jetzt hier im Querformat oder auf Geräten mit begrenzter Höhe. 33 00:02:55,350 --> 00:02:57,370 Auf Geräten mit größerer Höhe bekomme 34 00:02:57,480 --> 00:03:01,530 ich hier immer noch die alte Ansicht, die natürlich genau das ist, was ich will. 35 00:03:01,620 --> 00:03:08,260 Lassen Sie uns nun diese Ansicht hier korrigieren. Daher können wir einfach zu den Steuerelementen gehen und eine Breite 36 00:03:08,260 --> 00:03:16,340 von beispielsweise 80% angeben, damit der Gesamtcontainer größer und sehr wichtig ist. Stellen Sie hier die Ausrichtungselemente so ein, dass sie zentriert sind, 37 00:03:16,340 --> 00:03:24,340 sodass der Zahlencontainer und die beiden Schaltflächen sind alle vertikal zentriert. Und jetzt, wenn wir es hier noch 38 00:03:24,340 --> 00:03:33,560 einmal versuchen, geben wir dies ein, das sieht viel besser aus und es funktioniert genauso wie zuvor, aber 39 00:03:33,560 --> 00:03:38,950 jetzt haben wir ein anderes Layout basierend auf unseren Dimensionen. 40 00:03:38,990 --> 00:03:44,960 Das Problem ist natürlich, dass sich dieses Layout nicht ändert, wenn wir uns drehen, nicht das Ende der Welt, 41 00:03:45,050 --> 00:03:49,560 aber wir möchten vielleicht wieder zu diesem alten Layout zurückkehren, und Sie haben 42 00:03:49,670 --> 00:03:54,690 gelernt, wie das funktioniert. Wir müssen dies nur mit state und set verwalten einen Zuhörer. 43 00:03:54,690 --> 00:04:00,200 Jetzt habe ich bereits useState und useEffect hier auf dem Spielbildschirm. Alles, 44 00:04:00,200 --> 00:04:08,180 was wir in unserer Spielbildschirmkomponente tun müssen, ist, diesen Status hier einzurichten. Am Ende möchten wir hier unsere 45 00:04:08,370 --> 00:04:18,370 Gerätebreite verwalten, die sich im Laufe der Zeit ändert. Benennen Sie möglicherweise diese verfügbare Gerätebreite, um zu verdeutlichen, dass wir hier nicht die 46 00:04:18,370 --> 00:04:21,960 Gerätebreite festlegen, sondern nur die erkannte Gerätebreite. Sie 47 00:04:22,030 --> 00:04:25,370 können daher auch diese erkannte Gerätebreite benennen. 48 00:04:25,450 --> 00:04:34,090 Ich werde es verfügbare Gerätebreite nennen und verfügbare Gerätebreite einstellen. Ich schaffe dies mit useState, wo ich Dimensionen benutze, um die Fensterbreite 49 00:04:34,090 --> 00:04:43,930 zu erhalten, um die verfügbare Gerätebreite zu erhalten, und natürlich habe ich gerade erkannt, dass dies falsch ist. Wir sind an der Höhe interessiert, nicht an der Breite, 50 00:04:43,930 --> 00:04:44,470 aber 51 00:04:44,470 --> 00:04:46,480 wir brauchen auch die Breite 52 00:04:49,520 --> 00:04:52,850 für Diese Überprüfung hier, also werden wir beide brauchen. 53 00:04:53,300 --> 00:04:59,250 Wir haben also die verfügbare Gerätebreite und ich werde auch einen anderen 54 00:04:59,270 --> 00:05:00,560 Status verwalten, 55 00:05:00,560 --> 00:05:03,990 das ist unsere verfügbare Gerätehöhe. Hier 56 00:05:04,000 --> 00:05:07,300 wird auch die verfügbare Gerätehöhe eingestellt. 57 00:05:07,300 --> 00:05:11,700 Daher erhalten wir hier zunächst die verfügbare Gerätehöhe, und 58 00:05:11,710 --> 00:05:19,710 jetzt müssen wir beide ändern, wenn unsere Orientierungsänderungen. Dazu können wir hier beispielsweise den Effekt verwenden, eine Funktion 59 00:05:19,710 --> 00:05:29,310 einrichten, die beim Rendern unserer Komponente ausgeführt wird, und in dieser Funktion hier Dimensionen einrichten, Ereignis-Listener hinzufügen, Änderungsereignisse abhören und eine Funktion einrichten, 60 00:05:29,330 --> 00:05:35,810 die in diesem Fall ausgelöst werden soll In diesem Fall ist beispielsweise das Update-Layout ein passender 61 00:05:35,810 --> 00:05:39,720 Name, da wir genau das tun. Dort rufe 62 00:05:39,850 --> 00:05:51,420 ich die verfügbare Gerätebreite festlegen auf und setze dies auf dimension get get window. Breite und natürlich auch verfügbare Gerätehöhe auf Maße 63 00:05:51,420 --> 00:05:59,410 einstellen, um Fensterhöhe zu erhalten. Das Update-Layout ist daher die Funktion, auf die 64 00:05:59,410 --> 00:06:05,680 wir in unserem Ereignis-Listener für Dimensionen verweisen. Nach wie vor benötigen wir eine Bereinigungsfunktion, um 65 00:06:06,010 --> 00:06:14,080 unnötiges Rendern zu vermeiden. In dieser Funktion verwenden wir einfach Dimensionen, um die Änderung des Ereignis-Listeners zu entfernen, wo 66 00:06:14,170 --> 00:06:23,010 wir auf das Update-Layout verweisen, und wir 'Du bist gut. Jetzt müssen wir nur noch unsere beiden Zustände hier verwenden - 67 00:06:23,040 --> 00:06:25,390 verfügbare Gerätebreite und verfügbare Gerätehöhe. 68 00:06:25,500 --> 00:06:32,190 Wenn Sie hier prüfen, verwende ich die verfügbare Gerätebreite und hier, wo ich an der 69 00:06:32,220 --> 00:06:40,170 Höhe interessiert bin, verwende ich die verfügbare Gerätehöhe. Wenn wir dies jetzt speichern, sollten wir ein Layout haben, in dem 70 00:06:40,170 --> 00:06:47,070 wir, wenn wir ein Spiel starten, diesen Look haben, aber wenn wir dann in den Querformatmodus wechseln, ändert sich dies und ändert 71 00:06:47,070 --> 00:06:55,830 es natürlich auch zurück, wenn es nötig ist. Hier auf iOS haben wir diesen Look und wir haben diesen Look, wenn wir uns drehen. Das sieht jetzt wirklich gut 72 00:06:55,830 --> 00:07:03,500 aus und gibt uns das gewünschte Aussehen basierend auf der verfügbaren Breite und Höhe und berücksichtigt 73 00:07:03,510 --> 00:07:06,960 auch Änderungen daran, wenn wir das Gerät drehen.