Wenn ich nun mit diesen ersten grundlegenden Schritten eine Zahl hier eingebe und wir fortfahren, sieht das alles für
mich hier gut aus, das alles
funktioniert, wenn wir jetzt ein Spiel starten, dann
möchte ich auch diesen Abstand verringern, den wir haben hier und ich möchte auch sicherstellen, dass meine Box dort unten
ist,
also dieses Protokoll der Vermutungen, die wir haben, dass dies
auch besser aussieht.
Das können wir natürlich auf dem Spielbildschirm tun, denn das ist der Bildschirm, den
wir gerade dort anzeigen.
Zum einen ist es natürlich der Abstand, dieser Rand oben auf unserem unteren Container, der dieser Container ist, der Rand oben ist dieser Abstand zwischen
der Zahl hier und dem Container, und ich möchte dies ändern. Um dies zu ändern, können
wir
wieder die Dimensions-API verwenden.
Hier importiere ich also wieder Dimensionen aus React Native und jetzt dort
unten können wir diese Marge dynamisch berechnen. Was wir hier tun können, ist, dass wir wieder die Abmessungen unseres Fensters und
dann hier die Breite oder in diesem Fall wahrscheinlich die Höhe erhalten und dies dann durch etwas teilen können,
aber dies wäre sehr umständlich, wir könnten dies zum Beispiel durch 20 teilen , bis 20 und sehen, ob das gut aussieht, aber das ist
dann wirklich ein Ratespiel, dann ist es vielleicht nicht das, was wir wirklich wollen.
Stattdessen könnten wir überprüfen, wie viel Höhe wir zur Verfügung haben, und dann
einen anderen Abstand verwenden, der darauf basiert. Wir könnten überprüfen, ob unsere Größe größer als 600 ist. Wenn dies der Fall ist,
möchten wir einen Abstand von 20 haben, andernfalls haben wir einen von 10. Wir können also die Dimensionen, die wir berechnen, auch
in einer if-Bedingung verwenden, in diesem Fall in einem ternären Ausdruck hier, aber Sie können
sie auch in einer normalen if-Prüfung verwenden.
Jetzt können wir hierher zurückkehren und sehen jetzt, dass wir zu Beginn des Spiels keine so große Lücke hier
auf dem kleineren Bildschirm haben, auf dem iPhone, das ein größerer Bildschirm ist, aber definitiv einen
haben Größere Lücke und um das klarer zu sehen, können Sie natürlich damit
herumspielen und zum Beispiel 30 für kleinere Bildschirme und 30 für größere Bildschirme und 5 für kleinere Bildschirme verwenden, und
jetzt sollten Sie das definitiv sehen.
Hier haben wir eine kleine Lücke
und hier haben wir eine größere Lücke.
Wir können dies also auch unter if-Bedingungen verwenden.
Damit werde ich dies hier auf 20 und 5 zurücksetzen, aber dies zeigt jetzt hoffentlich auch eine andere Möglichkeit,
dies zu verwenden.
Sie können dies unter Bedingungen verwenden, die Ihnen natürlich viel Flexibilität bieten, wenn Sie
die Breite nicht in einer dynamischen Berechnung verwenden möchten, aber unterschiedliche fest codierte Werte haben, die Sie basierend
auf den verschiedenen gewünschten Haltepunkten verwenden möchten set, ein bisschen wie Sie es von CSS kennen, wo Sie
auch Medienabfragen haben und dann können Sie verschiedene Dinge basierend auf verschiedenen
Medienabfragen rendern.
Natürlich können Sie die Dimensions-API auch nicht in Ihrem Stylesheet verwenden. Sie können sie überall dort verwenden, wo
Sie Javascript verwenden können, also grundsätzlich überall in Ihren Komponenten. Sie können auch ganz andere Stile anhängen,
je nach verfügbarer Breite oder Höhe. Wir könnten hier auch das Fenster
"Abmessungen abrufen" verwenden, in dem ich meinen Stil zuweise, und beispielsweise meine Höhe hier überprüfen, prüfen, ob sie
größer als 600 ist. Wenn dies der Fall ist, verwenden Sie den Schaltflächencontainer "Stile" und andernfalls den
Schaltflächencontainer "Stile", wenn wir diesen haben Klasse. Ich habe es hier nicht, also werde ich es loswerden, aber das ist eine andere
Möglichkeit, dies zu verwenden. Sie können es überall dort verwenden, wo Javascript ausgeführt wird. Sie können es natürlich auch hier verwenden. Sie
können hier eine if-Prüfung durchführen lassen, bevor Sie Ihren jsx-Code zurückgeben und die Fensterhöhe abrufen. Wenn diese größer als 600 ist und wenn dies der Fall
ist, geben Sie beispielsweise einen völlig anderen jsx-Code zurück Dieser Code wird danach
nie mehr ausgeführt, wenn Sie hierher zurückkehren, und nur dann, wenn Sie es nicht schaffen, wenn Sie dies überprüfen.
Wenn Sie also
ein Gerät haben, das nicht so groß ist wie dieses, dann schaffen Sie es dort unten.
Sie sind hier also wirklich flexibel und nutzen diese Flexibilität, um die gewünschten Layouts zu erstellen, denn darum
geht es hier und Sie erhalten viel Flexibilität für Ihre Apps.
Das ist also
der Abstand hier, jetzt wollte ich auch meine Protokollelemente dort unten ändern,
das können wir natürlich auch leicht tun.
Wir haben dort unsere Listenelemente und auf den Listenelementen legen wir eine Breite von 100% fest, da wir hier unsere
Listenbreite mit dem Listencontainer festlegen und diese auf 60% festgelegt ist.
Jetzt sehen 60% auf größeren Geräten ziemlich gut aus, aber
auf kleineren Geräten könnten wir größer werden.
Jetzt können wir natürlich noch einmal versuchen, dies mit anderen Regeln zu lösen, wobei wir eine maximale Breite und eine minimale
Breite festlegen und möglicherweise auch die Dimensions-API verwenden, um dies dynamisch zu berechnen, oder wir verwenden erneut eine if-Prüfung.
Hier könnten wir wieder sagen, dass Dimensionen Fenster bekommen, in diesem Fall die verfügbare Breite erhalten und wenn
das sagen wir größer als 500 ist, dann
möchte ich 60% verwenden, andernfalls möchte ich 80% verwenden. Jetzt rendern wir einfach einen breiteren, breiteren Listencontainer basierend auf der
verfügbaren Breite auf dem Gerät, auf dem wir
ausgeführt werden,
und verwenden hier tatsächlich 350, möglicherweise anstelle von 500, da es sich um die Breite
und nicht um die Höhe handelt.
Wenn wir dies jetzt auf dem iPhone ausführen, haben wir die gleiche Breite wie zuvor, aber auf dem kleineren
Bildschirm haben wir größere Elemente.
Das können wir also auch tun, und Sie können natürlich mit dem Haltepunkt herumspielen,
den Sie hier effektiv festlegen.
Hier können Sie verschiedene Haltepunktgrößen ausprobieren.
Natürlich können Sie auch mehrere Haltepunkte haben,
Sie können hier verschachtelte ternäre Ausdrücke haben oder bevor Sie zu viele verschachtelte Ausdrücke schreiben, richten Sie einfach verschiedene Stilobjekte
hier ein, die Sie dann mit verschiedenen, wenn Sie dort verwendeten Prüfungen laden, laden. Um Ihnen ein Beispiel dafür zu geben,
wir könnten hier und da einen großen Listencontainer haben, wir setzen Flex eins und wir setzen
unsere Breite von sagen wir 80%, weil dies der große ist und
hier haben wir den normalen mit 60% .
Jetzt habe ich dort unten keine if-Bedingung, aber ich habe zwei verschiedene
Stilobjekte und jetzt müssen wir nur noch verschiedene Stilobjekte
dort oben anhängen, nicht hier, sondern hier natürlich in dieser Ansicht. Um dies zu tun, können wir hier einfach eine Stilvariable für Listencontainer einrichten
und auf den Listencontainer für Stile verweisen, der unsere Standardeinstellung ist. Fügen Sie dann hier eine if-Prüfung hinzu, in der
überprüft wird, ob die Abmessungen die Fensterbreite und jetzt die Breite hier erhalten Nehmen wir an, wir sind kleiner als 350. Wenn wir
also ein kleines Gerät haben, möchten wir den großen Listencontainer haben. Dann können wir
den Listencontainerstil festlegen.
Diese Variable entspricht dem Stillistencontainer, der groß
ist, um auf dieses Stilobjekt und jetzt zu zeigen Wir können dieses Stilobjekt hier in der Ansicht
verwenden, in der wir den Listencontainerstil benötigen. Wir verwenden jetzt die Variable, die ein anderes
Listencontainerstilobjekt enthält, basierend auf der Breite unseres Geräts. Und wenn wir dies jetzt speichern und erneut ausführen,
sehen Sie, dass wir auf dem iPhone mit dem größeren Gerät, auf dem wir mehr Breite haben, den kleineren Container
und hier auf dem Android-Handy mit dem kleineren Gerät mit weniger Breite erhalten der größere Behälter.
Es ist also das gleiche Ergebnis
wie zuvor, aber etwas lesbarer, und jetzt könnten wir mehrere solcher Überprüfungen durchführen, bei
denen wir hier verschiedene Stile im Listencontainer-Stil speichern,
den wir dann dort unten verwenden. Dies kann besser lesbar sein als verschachtelte ternäre Ausdrücke dort unten in Ihrem Stylesheet-Objekt.
So können Sie damit herumspielen und sich der Flexibilität der Dimensions-API bewusst zu sein, ist
hier wirklich entscheidend.