1 00:00:02,830 --> 00:00:08,740 Jetzt hatten wir ein weiteres Problem in dieser App hier, denn wenn dies alles hier gelöst ist, wenn 2 00:00:08,740 --> 00:00:12,200 wir schnell dorthin gehen, stellen Sie sicher, dass wir dies 3 00:00:12,220 --> 00:00:16,120 lösen, dann haben wir diesen Bildschirm und dieser Bildschirm ist auch kaputt. 4 00:00:16,120 --> 00:00:17,670 Wir haben hier zwei 5 00:00:17,680 --> 00:00:23,190 Probleme, eines ist, dass der Bildschirm nicht scrollbar ist, was bei größeren Geräten, bei denen wir mehr 6 00:00:23,200 --> 00:00:29,050 Höhe haben, kein Problem war, aber hier können wir nicht den gesamten Inhalt auf dem Bildschirm komprimieren, 7 00:00:29,050 --> 00:00:36,640 also möchten wir vielleicht Machen Sie es scrollbar, nur um sicher zu gehen und / oder alternativ, wir stellen sicher, dass wir garantiert 8 00:00:36,640 --> 00:00:43,270 alles auf den Bildschirm passen und um sicherzustellen, dass dies der Fall ist, müssen wir zum Spiel über dem Bildschirm 9 00:00:43,270 --> 00:00:50,230 gehen und unsere Höhen hier berechnen dynamisch, insbesondere die Bildhöhe hier, die wir gerade auf 300 Pixel fest codieren, was auf 10 00:00:50,230 --> 00:00:52,810 dem kleinen Gerät viel zu groß ist. 11 00:00:52,810 --> 00:00:55,950 Nachdem Sie bereits die Lösung dafür kennengelernt haben, 12 00:00:56,050 --> 00:01:02,880 können Sie die Dimensions-API erneut verwenden, indem Sie sie aus React Native importieren. Wenn die Dimensionen importiert 13 00:01:02,890 --> 00:01:11,430 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 14 00:01:12,150 --> 00:01:21,590 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 15 00:01:21,590 --> 00:01:24,860 wie eine Höhe haben, also kopiere ich das 16 00:01:24,860 --> 00:01:25,920 einfach dort. 17 00:01:25,920 --> 00:01:32,180 Wichtig ist, dass wir hier keine Höhe verwenden, da das Bild nicht 70% unserer verfügbaren Höhe hoch sein 18 00:01:32,480 --> 00:01:32,960 sollte, 19 00:01:33,200 --> 00:01:38,390 sondern nur die gleiche Höhe wie die Breite haben sollte und dies anhand der Gerätebreite 20 00:01:38,420 --> 00:01:45,260 berechnet wird. Daher verwenden wir dort unten die Breite auch. Jetzt sollte hier der Randradius die Hälfte davon sein, also können 21 00:01:45,380 --> 00:01:50,840 wir diesen auch hier verwenden und ihn dann durch zwei teilen, und wir haben den perfekten Randradius für 22 00:01:50,900 --> 00:01:54,170 diese dynamisch berechnete Breite. Das ist also eine wichtige Sache. 23 00:01:54,200 --> 00:01:59,030 Jetzt haben wir auch ein paar andere Größen, die wir einrichten, wie die Randvertikale hier, die wir auf 24 00:01:59,030 --> 00:02:07,600 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, 25 00:02:07,600 --> 00:02:11,380 in diesem Fall Höhe und vielleicht teilen wir 26 00:02:11,380 --> 00:02:21,010 dies durch sagen wir 20 und sehen, ob das gut aussieht und auch dort unten am Rand vertikal, vielleicht teilen wir dies durch 27 00:02:21,040 --> 00:02:26,720 40, weil es 15 war, das war 30, also Teilen wir dies durch 40, 28 00:02:26,740 --> 00:02:31,960 wenn wir dies durch 20 teilen, um wieder die gleiche Beziehung zwischen 29 00:02:31,960 --> 00:02:34,370 diesen beiden Randvertikalen zu haben. 30 00:02:34,510 --> 00:02:35,980 Also lasst uns 31 00:02:36,010 --> 00:02:41,150 das noch einmal lösen und sehen, was das Ergebnis ist, besser, jetzt können wir zumindest 32 00:02:41,180 --> 00:02:44,100 den Knopf sehen, aber immer noch nicht perfekt. 33 00:02:44,240 --> 00:02:50,150 Dieser Rand hier ist sicherlich noch zu groß und auch die Schriftgröße, wir könnten dies auch verkleinern. 34 00:02:50,330 --> 00:02:56,570 Ein runderes Bild, wir können die Höhe hier für diesen Rand, den wir einrichten, 35 00:02:56,570 --> 00:03:03,970 sicherlich durch 30 teilen und dann für diesen vertikalen Rand des Ergebniscontainers auf 60 gehen. Für die 36 00:03:04,130 --> 00:03:13,860 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 37 00:03:13,860 --> 00:03:25,210 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 38 00:03:25,210 --> 00:03:31,310 mit all den Optimierungen immer noch nicht in der Lage sind, es auf den 39 00:03:31,310 --> 00:03:35,400 Bildschirm zu bringen, zumindest nicht ohne alles super klein 40 00:03:35,510 --> 00:03:42,990 zu machen, möchten wir vielleicht diesen Bildlauf importieren Sehen Sie hier und schließen Sie unsere Ansicht damit 41 00:03:42,990 --> 00:03:50,730 ab. Fügen Sie hier also eine Bildlaufansicht um unsere Ansicht hinzu, um diese scrollbar zu machen. Schauen wir 42 00:03:50,850 --> 00:03:52,860 uns das jetzt noch einmal 43 00:03:52,880 --> 00:03:53,860 an. 44 00:04:03,670 --> 00:04:10,700 Lösen wir das, jetzt sieht es besser aus. Es passt auf den Bildschirm und wenn wir müssten, könnten wir es 45 00:04:10,700 --> 00:04:14,090 auch scrollen, wir können übrigens auf dem iPhone sehen, dass wir 46 00:04:19,360 --> 00:04:22,390 auf dem iPhone immer ein bisschen scrollen können, wenn 47 00:04:22,390 --> 00:04:27,010 wir dies lösen, und es springt Zurück, wir haben das Scrollen aktiviert und daher sieht 48 00:04:27,040 --> 00:04:32,920 dies jetzt auf dem iPhone gut aus, aber auch auf diesem Gerät, wo wir die Schriftgröße ein wenig reduzieren, den 49 00:04:33,070 --> 00:04:36,420 Abstand hier ein wenig bearbeiten und wenn es über unsere Grenzen 50 00:04:36,520 --> 00:04:45,760 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 51 00:04:45,760 --> 00:04:52,250 dabei, Benutzeroberflächen zu erstellen, die auf verschiedenen Gerätegrößen gut aussehen. Wie Sie gelernt haben, gibt es verschiedene 52 00:04:52,250 --> 00:04:59,230 Verwendungsmöglichkeiten - um Größen dynamisch zu berechnen, sei es für Breite oder Höhe oder Ränder und Natürlich auch 53 00:04:59,440 --> 00:05:05,710 in if-Anweisungen, um einfach unterschiedliche Inhalte zu rendern, unterschiedliche Stile oder unterschiedliche Stilobjekte basierend auf den 54 00:05:05,710 --> 00:05:10,750 hier festgelegten Breiten- oder Höhenbedingungen anzuhängen, aber das ist noch nicht alles, da 55 00:05:10,750 --> 00:05:16,180 Benutzer möglicherweise auch die Geräteorientierung ändern, während die App ausgeführt wird bedeutet manchmal auch, 56 00:05:16,180 --> 00:05:20,440 dass wir das Styling und / oder Layout ändern müssen.