Was ist nun mit
dem Styling, was ist mit diesen Tasten? Bei diesen Schaltflächen stellen
Sie möglicherweise fest, dass Sie jetzt ein seltsames Verhalten haben,
wenn Sie es in den Hochformatmodus zurückschreiben, auch hier auf Android. Wenn wir dagegen etwas ändern und dies rückgängig machen, damit die
App neu gestartet wird und wir im Hochformat starten, sehen Sie, dass es gut aussieht.
Wenn wir jetzt in den Querformatmodus wechseln, sieht es wieder schlecht aus.
Grundsätzlich wird die Breite unserer Schaltflächen beim Start der App angemeldet und nicht angepasst, wenn sich unsere Bildschirmgröße ändert, und natürlich
ändert sich dies, wenn wir das Gerät drehen, da Breite und Höhe vertauscht werden, sodass wir
mehr
Breite zur Verfügung haben, wenn wir Ich bin im Querformat als im Hochformat.
Das Problem ist, dass derzeit auf dem Startbildschirm, wenn wir die Breite unserer Schaltflächen einstellen, die Abmessungen dort
unten verwendet werden, die Abmessungen get verwendet werden. Dies und das ist sehr wichtig zu beachten, dies
wird nur berechnet, wenn Ihre App startet.
Wenn die App zum ersten Mal gestartet wird, wird die verfügbare Breite angezeigt. Wenn sie im Hochformat gestartet wird,
ist dies
die Breite des Hochformatmodus. Wenn sie im Querformat gestartet wird, ist dies die Breite des Querformatmodus und
sie meldet sich an und Wenn Sie das Gerät dann drehen und wenn Sie das Gerät dann drehen, wird dies nicht neu berechnet.
Jetzt möchten Sie natürlich, dass dies neu berechnet wird, und es gibt eine einfache Lösung dafür.
Wenn Sie eine Breite oder Höhe haben, alles, was Sie von Bemaßungen erhalten, die Änderungen der
Ausrichtung berücksichtigen sollten, und die bei Änderungen der Ausrichtung neu berechnet werden sollten, sollten Sie die Bemaßungsbreite dort
unten in Ihrem Stylesheet nicht verwenden, sondern stattdessen die Breite oder verwalten Welche Eigenschaft auch immer sich dynamisch ändern kann
und die Benutzeroberfläche neu gerendert werden sollte, wenn sie sich mit dem Status ändert.
Hier in der Startspielzeichenfolge haben wir bereits
useState. Jetzt können wir auch unsere Schaltflächenbreite hier verwalten, die Schaltflächenbreite mit useState festlegen und diese auf Dimensionen initialisieren,
um die Fensterbreite durch vier zu teilen. Dies ist die Standardeinstellung, mit
der ich begonnen habe.
Jetzt können Sie hier einen Listener für Dimensionen einrichten, anstatt get durch Aufrufen des Listeners für Ereignisereignisse zu verwenden und
das Änderungsereignis anzuhören, das ausgelöst wird, wenn sich die Dimensionen ändern. Dies ist normalerweise der
Fall, wenn der Benutzer das Gerät dreht.
Hier können wir also eine Funktion einrichten, beispielsweise das Layout aktualisieren. Hierbei handelt es sich um eine Funktion, bei der ich set button width aufrufe und hier erneut
auf meine Breite setze. Die Breite der Abmessungen hängt jedoch von der Breite des Bildschirms ab, wenn wir drehen es und
es ist diese Funktion,
die ich hier aufrufen möchte, also ist es das Update-Layout, das ich hier ohne Klammern aufrufen möchte,
weil wir nur auf diese Funktion zeigen möchten, damit sie für uns aufgerufen
wird, wenn sich die Abmessungen ändern, und dies stellt dies sicher Dies wird wiederholt, wenn sich
unsere Abmessungen ändern, und daher wird diese Komponente erneut gerendert.
Jetzt müssen wir nur noch sicherstellen, dass wir diese dynamisch neu berechnete Schaltfläche mit dem Status hier verwenden.
Wir können dies tun, indem wir Inline-Stile anstelle eines Stylesheet-Objekts verwenden.
Wenn Sie für die Schaltfläche andere Stile eingerichtet haben, die nicht von den Abmessungen abhängen, können Sie diese natürlich
hier im Stylesheet belassen. In diesem Fall habe
ich das jedoch nicht, also werde ich dies nur auskommentieren und Sie könnten das dann
mit einigen Inline-Stilen zusammenführen. Da wir hier keine
anderen Standardstile haben, werde ich dieses Stylesheet-Objekt, auf das wir zeigen, einfach durch ein Inline-Stilobjekt ersetzen, bei
dem ich die Breite gleich der Schaltflächenbreite setze und dies natürlich auch für meine zweite Schaltfläche und damit
auch für uns tue Das Styling ändert sich jetzt, wenn wir das Gerät drehen.
Wenn wir dies speichern, werden Sie sehen, dass dies jetzt gut
aussieht, egal wie wir es drehen, auch unter Android, da dies neu gerendert wird.
Jetzt ein wichtiger Hinweis hier, im Moment, in dem ich hier eine Reihe von Ereignis-Listenern einrichte, füge ich immer einen
neuen Ereignis-Listener hinzu, wenn diese Komponente neu gerendert wird, und das ist nicht das,
was ich
tun möchte, und wir können es verwenden Effekt, der auch in React integriert ist und den Sie beachten sollten, um
Code zu haben, den wir ausführen, wenn unsere Komponente erneut gerendert wird.
Jetzt kann ich hier den Use-Effekt verwenden, und die Funktion, die ich bei jedem erneuten Rendern ausführen möchte, ist
eine Funktion, die am Ende diese Update-Layout-Funktion hier erstellt und meinen Ereignis-Listener hinzufügt.
Daher schneide ich diese aus und füge sie hier hinzu In Use-Effekt-Funktion und
wenn wir dann hier etwas in Use-Effekt zurückgeben, ist dies unsere Bereinigungsfunktion, die direkt
vor dem Ausführen des Use-Effekts ausgeführt wird. Dort möchte ich meinen Listener bereinigen, da ich hier Dimensionen aufrufen kann, um
die Ereignis-Listener-Änderung zu entfernen Layout aktualisieren.
Jetzt bereinigen wir dies und richten eine neue ein, wenn unsere Komponente neu gerendert wird, bereinigen die alte,
richten eine neue ein und haben daher immer nur einen laufenden Ereignis-Listener.
Wenn wir es so machen, ist das einfach sauberer. Wenn wir dies jetzt speichern und zurückgehen, haben wir
das gleiche Verhalten wie zuvor, aber jetzt auf saubere Weise, indem wir useState und use effect
und vor allem die Event-Listening-Funktionen von verwenden Die Dimensions-API, mit der wir Dimensionen nicht nur einmal festlegen,
sondern bei Änderungen neu berechnen können.