Wie erhalte ich die Bildschirmbreite in React native?
(Ich brauche es, weil ich einige absolute Komponenten verwende, die sich überlappen und deren Position auf dem Bildschirm sich mit verschiedenen Geräten ändert.)
react-native
Zygro
quelle
quelle
Dimensions.get('window').width
?Deklarieren Sie einfach diesen Code, um die Gerätebreite zu erhalten
Vielleicht ist es offensichtlich, aber Dimensions ist ein reaktionsnativer Import
Abmessungen funktionieren ohne das nicht
quelle
Wenn Sie eine Stilkomponente haben, die Sie von Ihrer Komponente benötigen können, können Sie Folgendes oben in der Datei haben:
Und dann könnten Sie
fulscreen: {width: window.width, height: window.height},
in Ihrer Style-Komponente bereitstellen . Hoffe das hilftquelle
Native Dimensions reagieren ist nur eine teilweise Antwort auf diese Frage. Ich bin hierher gekommen, um nach der tatsächlichen Pixelgröße des Bildschirms zu suchen, und die Dimensions geben Ihnen tatsächlich eine dichteunabhängige Layoutgröße.
Sie können React Native Pixel Ratio verwenden, um die tatsächliche Pixelgröße des Bildschirms zu ermitteln.
Sie benötigen die Importanweisung für Dimenions und PixelRatio
Sie können die Objektdestrukturierung verwenden, um globale Breiten- und Höhenwerte zu erstellen oder sie in Stylesheets einzufügen, wie andere vorschlagen. Beachten Sie jedoch, dass dies bei der Neuausrichtung des Geräts nicht aktualisiert wird.
Aus React Native Dimension- Dokumenten:
PixelRatio Docs Link für diejenigen, die neugierig sind, aber nicht viel mehr.
Um die Bildschirmgröße tatsächlich zu erhalten, verwenden Sie:
oder wenn Sie nicht möchten, dass Breite und Höhe global sind, können Sie sie überall so verwenden
quelle
React Native wird mit der API "Dimensions" geliefert, die wir aus "react-native" importieren müssen.
Dann,
quelle
10. April 2020 Antwort:
Von der vorgeschlagenen Antwort
Dimensions
wird jetzt abgeraten. Siehe: https://reactnative.dev/docs/dimensionsDer empfohlene Ansatz ist die Verwendung des
useWindowDimensions
Hooks in React. https://reactnative.dev/docs/usewindowdimensions , das eine Hook-basierte API verwendet und Ihren Wert auch aktualisiert, wenn sich der Bildschirmwert ändert (z. B. bei Bildschirmdrehung):Hinweis:
useWindowDimensions
ist nur in React Native 0.61.0 verfügbar: https://reactnative.dev/blog/2019/09/18/version-0.61quelle
Nur zwei einfache Schritte.
import { Dimensions } from 'react-native'
oben in Ihrer Datei.const { height } = Dimensions.get('window');
Jetzt wird die Höhe des Fensterbildschirms in der Höhenvariablen gespeichert.
quelle
react-native-responsive-screen
Habe gerade Repo hier entdeckt . Fand es sehr praktisch.quelle
Ich denke, die Verwendung
react-native-responsive-dimensions
könnte Ihnen in Ihrem Fall etwas besser helfen.Sie können immer noch bekommen:
Gerätebreite mit und
responsiveScreenWidth(100)
und
Gerätehöhe mit und
responsiveScreenHeight(100)
Sie können die Positionen Ihrer absoluten Komponenten auch einfacher anordnen, indem Sie Ränder und Positionswerte so einstellen, dass sie über 100% der Breite und Höhe proportioniert werden
quelle