Wenn wir nun zum nächsten Bildschirm gehen, auf dem wir ein laufendes Spiel haben, stehen wir dort vor dem nächsten
Problem. Im
Hochformat sieht es gut aus, aber wenn wir das Gerät drehen, sieht es nicht besonders gut aus.
Hier könnte eine Lösung einfach darin bestehen, dass wir das Styling ein wenig ändern, wenn
wir nicht so viel Höhe zur Verfügung haben.
Alternativ rendern wir ein völlig anderes Layout, basierend auf dem verfügbaren Speicherplatz. Beide
Optionen stehen Ihnen zur Verfügung.
Sie könnten zum Beispiel versuchen, dies nebeneinander zu rendern, indem Sie einfach einen if-Check hier in Ihrem Spielbildschirm
hinzufügen, in dem Sie einen völlig anderen jsx-Code und möglicherweise auch ein völlig anderes Design und
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
Ihre Komponente neu
rendert. Mit der festgelegten Phase, wie wir es hier auf dem Startbildschirm getan haben,
können Sie Ihre Komponente in jedem Fall neu rendern. Ich denke, das wäre irgendwie interessant und deshalb werde ich das hier tun.
Ich möchte meine Schaltflächen hier links und rechts vom Nummerncontainer rendern, wenn nur eine begrenzte
Höhe verfügbar ist, und sie wie immer rendern, wenn dies nicht
der Fall ist.
Daher möchte ich basierend auf meinen Abmessungen einen völlig anderen JSX-Code rendern.
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
ist und wir sehen, ob dieser
Wert funktioniert. Dann möchte ich im Grunde diesen
jsx-Code von dort unten zurückgeben, also ' Ich kopiere das, setze es hier in Klammern, Klammern, aber ich möchte meine Karte nicht
hier haben, stattdessen habe ich den ersten Hauptknopf vor meinem Nummerncontainer, den nächsten nach dem Nummerncontainer und
ich habe alle davon in einer neuen Ansicht hier,
die ich hier umwickeln werde, die diese drei Dinge in einer Reihe auslegen sollte.
Also werde ich hier einen brandneuen Stil hinzufügen, Stile, sagen wir Steuerelemente oder wie auch immer Sie ihn benennen möchten,
und jetzt füge ich dies meinem Stylesheet hier hinzu und das ist das gleiche
Stylesheet wie zuvor, weil es nur Stile einrichtet, die ich überall verwenden kann Komponente, egal unter welchen
Bedingungen ich was rendere und hier werde ich diese Flex-Richtung
auf Zeile setzen, die Standardeinstellung ist Spalte und jetzt möchten wir hier eine Zeile haben und ich werde den begründeten Inhalt
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
schlecht aus, es
gibt noch einiges zu tun, aber das bekomme ich jetzt hier im Querformat oder auf Geräten mit begrenzter Höhe.
Auf Geräten mit größerer Höhe bekomme
ich hier immer noch die alte Ansicht, die natürlich genau das ist, was ich will.
Lassen Sie uns nun diese Ansicht hier korrigieren. Daher können wir einfach zu den Steuerelementen gehen und eine Breite
von beispielsweise 80% angeben, damit der Gesamtcontainer größer und sehr wichtig ist. Stellen Sie hier die Ausrichtungselemente so ein, dass sie zentriert sind,
sodass der Zahlencontainer und die beiden Schaltflächen sind alle vertikal zentriert. Und jetzt, wenn wir es hier noch
einmal versuchen, geben wir dies ein, das sieht viel besser aus und es funktioniert genauso wie zuvor, aber
jetzt haben wir ein anderes Layout basierend auf unseren Dimensionen.
Das Problem ist natürlich, dass sich dieses Layout nicht ändert, wenn wir uns drehen, nicht das Ende der Welt,
aber wir möchten vielleicht wieder zu diesem alten Layout zurückkehren, und Sie haben
gelernt, wie das funktioniert. Wir müssen dies nur mit state und set verwalten einen Zuhörer.
Jetzt habe ich bereits useState und useEffect hier auf dem Spielbildschirm. Alles,
was wir in unserer Spielbildschirmkomponente tun müssen, ist, diesen Status hier einzurichten. Am Ende möchten wir hier unsere
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
Gerätebreite festlegen, sondern nur die erkannte Gerätebreite. Sie
können daher auch diese erkannte Gerätebreite benennen.
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
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,
aber
wir brauchen auch die Breite
für Diese Überprüfung hier, also werden wir beide brauchen.
Wir haben also die verfügbare Gerätebreite und ich werde auch einen anderen
Status verwalten,
das ist unsere verfügbare Gerätehöhe. Hier
wird auch die verfügbare Gerätehöhe eingestellt.
Daher erhalten wir hier zunächst die verfügbare Gerätehöhe, und
jetzt müssen wir beide ändern, wenn unsere Orientierungsänderungen. Dazu können wir hier beispielsweise den Effekt verwenden, eine Funktion
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,
die in diesem Fall ausgelöst werden soll In diesem Fall ist beispielsweise das Update-Layout ein passender
Name, da wir genau das tun. Dort rufe
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
einstellen, um Fensterhöhe zu erhalten. Das Update-Layout ist daher die Funktion, auf die
wir in unserem Ereignis-Listener für Dimensionen verweisen. Nach wie vor benötigen wir eine Bereinigungsfunktion, um
unnötiges Rendern zu vermeiden. In dieser Funktion verwenden wir einfach Dimensionen, um die Änderung des Ereignis-Listeners zu entfernen, wo
wir auf das Update-Layout verweisen, und wir 'Du bist gut. Jetzt müssen wir nur noch unsere beiden Zustände hier verwenden -
verfügbare Gerätebreite und verfügbare Gerätehöhe.
Wenn Sie hier prüfen, verwende ich die verfügbare Gerätebreite und hier, wo ich an der
Höhe interessiert bin, verwende ich die verfügbare Gerätehöhe. Wenn wir dies jetzt speichern, sollten wir ein Layout haben, in dem
wir, wenn wir ein Spiel starten, diesen Look haben, aber wenn wir dann in den Querformatmodus wechseln, ändert sich dies und ändert
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
aus und gibt uns das gewünschte Aussehen basierend auf der verfügbaren Breite und Höhe und berücksichtigt
auch Änderungen daran, wenn wir das Gerät drehen.