Jetzt hatten wir ein weiteres Problem in dieser App hier, denn wenn dies alles hier gelöst ist, wenn
wir schnell dorthin gehen, stellen Sie sicher, dass wir dies
lösen, dann haben wir diesen Bildschirm und dieser Bildschirm ist auch kaputt.
Wir haben hier zwei
Probleme, eines ist, dass der Bildschirm nicht scrollbar ist, was bei größeren Geräten, bei denen wir mehr
Höhe haben, kein Problem war, aber hier können wir nicht den gesamten Inhalt auf dem Bildschirm komprimieren,
also möchten wir vielleicht Machen Sie es scrollbar, nur um sicher zu gehen und / oder alternativ, wir stellen sicher, dass wir garantiert
alles auf den Bildschirm passen und um sicherzustellen, dass dies der Fall ist, müssen wir zum Spiel über dem Bildschirm
gehen und unsere Höhen hier berechnen dynamisch, insbesondere die Bildhöhe hier, die wir gerade auf 300 Pixel fest codieren, was auf
dem kleinen Gerät viel zu groß ist.
Nachdem Sie bereits die Lösung dafür kennengelernt haben,
können Sie die Dimensions-API erneut verwenden, indem Sie sie aus React Native importieren. Wenn die Dimensionen importiert
werden, können Sie zu unserem Stylesheet gehen und im Bildcontainer sagen, dass Dimensionen die Fensterbreite und -größe erhalten Nehmen wir nun für
den Bildcontainer an, für das Bild hier möchten wir eine Breite von vielleicht 70% der verfügbaren Breite haben und wir möchten den gleichen Wert
wie eine Höhe haben, also kopiere ich das
einfach dort.
Wichtig ist, dass wir hier keine Höhe verwenden, da das Bild nicht 70% unserer verfügbaren Höhe hoch sein
sollte,
sondern nur die gleiche Höhe wie die Breite haben sollte und dies anhand der Gerätebreite
berechnet wird. Daher verwenden wir dort unten die Breite auch. Jetzt sollte hier der Randradius die Hälfte davon sein, also können
wir diesen auch hier verwenden und ihn dann durch zwei teilen, und wir haben den perfekten Randradius für
diese dynamisch berechnete Breite. Das ist also eine wichtige Sache.
Jetzt haben wir auch ein paar andere Größen, die wir einrichten, wie die Randvertikale hier, die wir auf
30 fest codieren, das gleiche für den Ergebniscontainer, und wir möchten dies möglicherweise auch ändern. Hier können wir also auch sagen, dass Dimensionen Fenster bekommen,
in diesem Fall Höhe und vielleicht teilen wir
dies durch sagen wir 20 und sehen, ob das gut aussieht und auch dort unten am Rand vertikal, vielleicht teilen wir dies durch
40, weil es 15 war, das war 30, also Teilen wir dies durch 40,
wenn wir dies durch 20 teilen, um wieder die gleiche Beziehung zwischen
diesen beiden Randvertikalen zu haben.
Also lasst uns
das noch einmal lösen und sehen, was das Ergebnis ist, besser, jetzt können wir zumindest
den Knopf sehen, aber immer noch nicht perfekt.
Dieser Rand hier ist sicherlich noch zu groß und auch die Schriftgröße, wir könnten dies auch verkleinern.
Ein runderes Bild, wir können die Höhe hier für diesen Rand, den wir einrichten,
sicherlich durch 30 teilen und dann für diesen vertikalen Rand des Ergebniscontainers auf 60 gehen. Für die
Schriftgröße hier können wir eine if-Prüfung verwenden, wenn wir möchten und überprüfen Sie zum Beispiel unsere verfügbare Höhe hier und wenn das
kleiner als 400 ist, dann verwenden wir hier 16 und ansonsten 20. Last but not least, um sicherzustellen, dass wir scrollen können, weil wir manchmal
mit all den Optimierungen immer noch nicht in der Lage sind, es auf den
Bildschirm zu bringen, zumindest nicht ohne alles super klein
zu machen, möchten wir vielleicht diesen Bildlauf importieren Sehen Sie hier und schließen Sie unsere Ansicht damit
ab. Fügen Sie hier also eine Bildlaufansicht um unsere Ansicht hinzu, um diese scrollbar zu machen. Schauen wir
uns das jetzt noch einmal
an.
Lösen wir das, jetzt sieht es besser aus. Es passt auf den Bildschirm und wenn wir müssten, könnten wir es
auch scrollen, wir können übrigens auf dem iPhone sehen, dass wir
auf dem iPhone immer ein bisschen scrollen können, wenn
wir dies lösen, und es springt Zurück, wir haben das Scrollen aktiviert und daher sieht
dies jetzt auf dem iPhone gut aus, aber auch auf diesem Gerät, wo wir die Schriftgröße ein wenig reduzieren, den
Abstand hier ein wenig bearbeiten und wenn es über unsere Grenzen
hinausgehen würde, könnten wir es Scrolle es, damit wir immer mit unserem Spiel interagieren können. Das ist also die Dimensions-API hier und die Dimensions-API hilft uns wirklich
dabei, Benutzeroberflächen zu erstellen, die auf verschiedenen Gerätegrößen gut aussehen. Wie Sie gelernt haben, gibt es verschiedene
Verwendungsmöglichkeiten - um Größen dynamisch zu berechnen, sei es für Breite oder Höhe oder Ränder und Natürlich auch
in if-Anweisungen, um einfach unterschiedliche Inhalte zu rendern, unterschiedliche Stile oder unterschiedliche Stilobjekte basierend auf den
hier festgelegten Breiten- oder Höhenbedingungen anzuhängen, aber das ist noch nicht alles, da
Benutzer möglicherweise auch die Geräteorientierung ändern, während die App ausgeführt wird bedeutet manchmal auch,
dass wir das Styling und / oder Layout ändern müssen.