1 00:00:02,230 --> 00:00:04,920 Manchmal kann man jedoch das Layout mit der 2 00:00:04,930 --> 00:00:10,720 prozentualen Breite und solchen fest codierten Pixeln einfach nicht richtig einstellen. Manchmal muss man wirklich wissen, 3 00:00:10,720 --> 00:00:12,210 wie viele Pixel 4 00:00:12,340 --> 00:00:18,130 verfügbar sind, zum Beispiel hier auf den Schaltflächen, auf denen wir eine Breite von 100 einstellen 5 00:00:18,130 --> 00:00:19,990 100 unabhängig von der Gerätegröße. 6 00:00:19,990 --> 00:00:24,460 Jetzt wissen wir eigentlich, dass wir zwei Knöpfe nebeneinander haben wollen. 7 00:00:24,550 --> 00:00:31,960 Wir können also einfach sicherstellen, dass wir eine Tastenbreite verwenden, die immer auf den Bildschirm passt, egal wie klein diese 8 00:00:31,960 --> 00:00:33,830 ist. Dazu müssen wir 9 00:00:33,850 --> 00:00:39,460 herausfinden, wie viele Pixel in der Breite verfügbar sind, und das können wir Finden Sie 10 00:00:39,460 --> 00:00:44,170 es mit Hilfe von React Native heraus. Dort können Sie aus 11 00:00:44,170 --> 00:00:48,880 React Native das Dimensionsobjekt hier importieren, Dimensions ist der Name. 12 00:00:48,940 --> 00:00:55,720 Dies ist jetzt keine Komponente, die Sie verwenden, sondern ein Objekt, mit dem Sie herausfinden können, wie 13 00:00:55,810 --> 00:00:58,380 viel Breite Ihnen zur Verfügung steht. 14 00:00:58,420 --> 00:01:04,270 Jetzt können wir dies zum Beispiel dort unten verwenden, wo wir unsere Schaltflächenbreite festlegen. Anstatt dies so 15 00:01:04,780 --> 00:01:07,080 festzulegen, können wir unsere Breite auf 16 00:01:07,210 --> 00:01:12,850 Bemaßungen festlegen, und dann gibt es eine get-Methode, mit der Sie die Bemaßungen des Fensters abrufen können. 17 00:01:12,850 --> 00:01:14,440 Sie können es auch 18 00:01:14,440 --> 00:01:21,700 vom Bildschirm erhalten, der Unterschied zwischen Fenster und Bildschirm ist nur unter Android von Bedeutung, wo bei Fenstern die Höhe der Statusleiste von 19 00:01:21,700 --> 00:01:23,640 der Berechnung ausgeschlossen wird und dies 20 00:01:23,740 --> 00:01:26,110 daher wirklich der Teil des Bildschirms ist, 21 00:01:26,260 --> 00:01:28,720 auf dem sich Ihr Inhalt befindet lebe in. 22 00:01:28,780 --> 00:01:32,130 Daher sollten Sie hier normalerweise das Fenster verwenden, da es unter 23 00:01:32,130 --> 00:01:38,800 iOS keine Rolle spielt. Unter Android ist dies garantiert der Teil des Bildschirms, in dem sich Ihre Benutzeroberfläche wirklich befindet, ohne 24 00:01:38,800 --> 00:01:40,110 diese Statusleiste oben. 25 00:01:40,180 --> 00:01:46,390 In der Regel möchten Sie hier das Fenster verwenden, um den tatsächlichen Raum zu erhalten, den Sie für Ihr Layout zur Verfügung haben, 26 00:01:46,390 --> 00:01:52,600 sowie die tatsächlichen Abmessungen, die Sie für Ihr Layout verwenden können. Dies gibt Ihnen nun ein Objekt, mit dem Sie 27 00:01:52,750 --> 00:01:56,470 einige Eigenschaften erhalten können, vier, um genau zu sein - die 28 00:01:56,470 --> 00:02:01,540 vom Benutzer eingerichtete Schriftgröße. Wenn Benutzer beispielsweise größere Schriftarten wünschen, können Sie hier den Multiplikator mit 29 00:02:01,540 --> 00:02:03,560 erhalten Schriftgröße, aber am wichtigsten ist, 30 00:02:03,670 --> 00:02:09,610 dass Sie die Breite und die Höhe erhalten. Wenn wir hier die Breite erhalten, erhalten wir die Gesamtbreite 31 00:02:09,610 --> 00:02:11,050 des Geräts, auf 32 00:02:11,050 --> 00:02:12,580 dem diese App ausgeführt wird. 33 00:02:12,580 --> 00:02:19,390 Jetzt wissen wir, dass wir hier mindestens zwei Tasten in dieses Gerät drücken möchten, also können wir dies 34 00:02:19,390 --> 00:02:25,730 einfach durch zwei teilen, sodass jetzt jede Taste halb so breit ist wie das Gerät. 35 00:02:25,730 --> 00:02:30,190 Wenn wir das speichern, bekommen wir natürlich nicht wirklich das gewünschte Aussehen, weil es natürlich 36 00:02:30,190 --> 00:02:35,620 zu groß ist, aber wenn wir dies zum Beispiel durch drei teilen, sieht dies auf dem kleinen Bildschirm 37 00:02:35,620 --> 00:02:37,060 bereits besser aus, aber 38 00:02:37,060 --> 00:02:42,520 nicht auf dem großen wie wäre es mit vier? Wenn wir vier nehmen, haben wir viel Platz für 39 00:02:42,520 --> 00:02:49,690 all den anderen Platz, den wir brauchen, wie den Abstand um unseren Container, und wir stellen sicher, dass unsere Tasten immer die Gerätegröße berücksichtigen. 40 00:02:49,720 --> 00:02:55,510 Natürlich hätten Sie hier etwas Ähnliches erreichen können, indem Sie die Breite auf einen Prozentsatz eingestellt hätten, 41 00:02:55,510 --> 00:03:00,760 wie hier 40%, aber ich wollte hier auch die Dimensions-API einführen, die wir später ebenfalls 42 00:03:00,760 --> 00:03:01,550 verwenden werden. 43 00:03:01,570 --> 00:03:07,480 Es ist eine großartige API, um herauszufinden, wie viele Pixel auf der Breite und Höhe des Geräts 44 00:03:07,870 --> 00:03:09,140 oder auf dem 45 00:03:09,190 --> 00:03:15,670 Gerät verfügbar sind. Dies ist wichtig, wobei sich der Prozentsatz hier immer auf die direkte übergeordnete Ansicht und nicht immer 46 00:03:15,670 --> 00:03:17,560 auf die verfügbare Breite des 47 00:03:17,650 --> 00:03:20,880 Geräts bezieht Dies ist sozusagen nur auf dem obersten übergeordneten 48 00:03:20,890 --> 00:03:28,330 Element der Fall, also auf der obersten Ansicht, die Sie rendern. Das Fenster "Abmessungen erhalten" gibt Ihnen immer die Abmessungen für das gesamte Gerät 49 00:03:28,330 --> 00:03:30,750 an, unabhängig davon, wo Sie es verwenden. 50 00:03:30,760 --> 00:03:38,480 Die Breite hier ist also immer die Breite unseres Bildschirms auf dem Gerät und niemals die des Elternteils oder irgendetwas anderes. 51 00:03:38,560 --> 00:03:43,390 Dies kann also sehr nützlich sein, wenn Sie etwas auf eine bestimmte Art und Weise stylen oder 52 00:03:43,390 --> 00:03:48,100 eine bestimmte Größe anpassen möchten, da dies Ihnen sagt, wie viel Breite Sie zur Verfügung haben.