Manchmal kann man jedoch das Layout mit der
prozentualen Breite und solchen fest codierten Pixeln einfach nicht richtig einstellen. Manchmal muss man wirklich wissen,
wie viele Pixel
verfügbar sind, zum Beispiel hier auf den Schaltflächen, auf denen wir eine Breite von 100 einstellen
100 unabhängig von der Gerätegröße.
Jetzt wissen wir eigentlich, dass wir zwei Knöpfe nebeneinander haben wollen.
Wir können also einfach sicherstellen, dass wir eine Tastenbreite verwenden, die immer auf den Bildschirm passt, egal wie klein diese
ist. Dazu müssen wir
herausfinden, wie viele Pixel in der Breite verfügbar sind, und das können wir Finden Sie
es mit Hilfe von React Native heraus. Dort können Sie aus
React Native das Dimensionsobjekt hier importieren, Dimensions ist der Name.
Dies ist jetzt keine Komponente, die Sie verwenden, sondern ein Objekt, mit dem Sie herausfinden können, wie
viel Breite Ihnen zur Verfügung steht.
Jetzt können wir dies zum Beispiel dort unten verwenden, wo wir unsere Schaltflächenbreite festlegen. Anstatt dies so
festzulegen, können wir unsere Breite auf
Bemaßungen festlegen, und dann gibt es eine get-Methode, mit der Sie die Bemaßungen des Fensters abrufen können.
Sie können es auch
vom Bildschirm erhalten, der Unterschied zwischen Fenster und Bildschirm ist nur unter Android von Bedeutung, wo bei Fenstern die Höhe der Statusleiste von
der Berechnung ausgeschlossen wird und dies
daher wirklich der Teil des Bildschirms ist,
auf dem sich Ihr Inhalt befindet lebe in.
Daher sollten Sie hier normalerweise das Fenster verwenden, da es unter
iOS keine Rolle spielt. Unter Android ist dies garantiert der Teil des Bildschirms, in dem sich Ihre Benutzeroberfläche wirklich befindet, ohne
diese Statusleiste oben.
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,
sowie die tatsächlichen Abmessungen, die Sie für Ihr Layout verwenden können. Dies gibt Ihnen nun ein Objekt, mit dem Sie
einige Eigenschaften erhalten können, vier, um genau zu sein - die
vom Benutzer eingerichtete Schriftgröße. Wenn Benutzer beispielsweise größere Schriftarten wünschen, können Sie hier den Multiplikator mit
erhalten Schriftgröße, aber am wichtigsten ist,
dass Sie die Breite und die Höhe erhalten. Wenn wir hier die Breite erhalten, erhalten wir die Gesamtbreite
des Geräts, auf
dem diese App ausgeführt wird.
Jetzt wissen wir, dass wir hier mindestens zwei Tasten in dieses Gerät drücken möchten, also können wir dies
einfach durch zwei teilen, sodass jetzt jede Taste halb so breit ist wie das Gerät.
Wenn wir das speichern, bekommen wir natürlich nicht wirklich das gewünschte Aussehen, weil es natürlich
zu groß ist, aber wenn wir dies zum Beispiel durch drei teilen, sieht dies auf dem kleinen Bildschirm
bereits besser aus, aber
nicht auf dem großen wie wäre es mit vier? Wenn wir vier nehmen, haben wir viel Platz für
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.
Natürlich hätten Sie hier etwas Ähnliches erreichen können, indem Sie die Breite auf einen Prozentsatz eingestellt hätten,
wie hier 40%, aber ich wollte hier auch die Dimensions-API einführen, die wir später ebenfalls
verwenden werden.
Es ist eine großartige API, um herauszufinden, wie viele Pixel auf der Breite und Höhe des Geräts
oder auf dem
Gerät verfügbar sind. Dies ist wichtig, wobei sich der Prozentsatz hier immer auf die direkte übergeordnete Ansicht und nicht immer
auf die verfügbare Breite des
Geräts bezieht Dies ist sozusagen nur auf dem obersten übergeordneten
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
an, unabhängig davon, wo Sie es verwenden.
Die Breite hier ist also immer die Breite unseres Bildschirms auf dem Gerät und niemals die des Elternteils oder irgendetwas anderes.
Dies kann also sehr nützlich sein, wenn Sie etwas auf eine bestimmte Art und Weise stylen oder
eine bestimmte Größe anpassen möchten, da dies Ihnen sagt, wie viel Breite Sie zur Verfügung haben.