Bildschirmbreite in React Native

105

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.)

Zygro
quelle

Antworten:

171

In React-Native haben wir eine Option namens Dimensions

Fügen Sie Bemaßungen in die obere Variable ein, in die Sie das Bild, den Text und andere Komponenten aufgenommen haben.

Dann können Sie in Ihren Stylesheets wie folgt verwenden:

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

Auf diese Weise können Sie das Gerätefenster und die Höhe abrufen.

Pramod Mg
quelle
Wie kann ich dies verwenden, wenn ich die Summe der Breite von 2 Komponenten gleich der machen möchte Dimensions.get('window').width?
Andy95
Speichern Sie diese Werte einfach global und verwenden Sie sie überall, wo es nicht sicher ist, wenn Ihr Gerät gedreht wird. Ich empfehle die Verwendung von React Hooks in Funktionskomponenten
MJ Studio
77

Deklarieren Sie einfach diesen Code, um die Gerätebreite zu erhalten

let deviceWidth = Dimensions.get('window').width

Vielleicht ist es offensichtlich, aber Dimensions ist ein reaktionsnativer Import

import { Dimensions } from 'react-native'

Abmessungen funktionieren ohne das nicht

Aneesh PV
quelle
10
Danke dir! Menschen mit Stapelüberlauf lassen zu oft aus, woher ihre Importe stammen. Danke, dass du es aufgenommen hast, genau das habe ich gebraucht. Es ist nicht in den offiziellen Dokumenten.
Jack Davidson
23

Wenn Sie eine Stilkomponente haben, die Sie von Ihrer Komponente benötigen können, können Sie Folgendes oben in der Datei haben:

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

Und dann könnten Sie fulscreen: {width: window.width, height: window.height},in Ihrer Style-Komponente bereitstellen . Hoffe das hilft

Tom Hanson
quelle
18

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

import { Dimensions, PixelRatio } from 'react-native';

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.

const { width, height } = Dimensions.get('window');

Aus React Native Dimension- Dokumenten:

Hinweis: Obwohl Bemaßungen sofort verfügbar sind, können sie sich ändern (z. B. aufgrund von> Gerätedrehung). Daher sollte jede Renderlogik oder jeder Renderstil, der von diesen Konstanten abhängt, versuchen, diese Funktion bei jedem Rendern aufzurufen, anstatt den Wert zwischenzuspeichern (z. B.) Verwenden Sie Inline-Stile, anstatt einen Wert in einem StyleSheet festzulegen.

PixelRatio Docs Link für diejenigen, die neugierig sind, aber nicht viel mehr.

Um die Bildschirmgröße tatsächlich zu erhalten, verwenden Sie:

PixelRatio.getPixelSizeForLayoutSize(width);

oder wenn Sie nicht möchten, dass Breite und Höhe global sind, können Sie sie überall so verwenden

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);
NJensen
quelle
10

React Native wird mit der API "Dimensions" geliefert, die wir aus "react-native" importieren müssen.

import { Dimensions } from 'react-native';

Dann,

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>
Swetank Subham
quelle
8

10. April 2020 Antwort:

Von der vorgeschlagenen Antwort Dimensionswird jetzt abgeraten. Siehe: https://reactnative.dev/docs/dimensions

Der empfohlene Ansatz ist die Verwendung des useWindowDimensionsHooks 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):

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

Hinweis: useWindowDimensionsist nur in React Native 0.61.0 verfügbar: https://reactnative.dev/blog/2019/09/18/version-0.61

micnguyen
quelle
3

Nur zwei einfache Schritte.

  1. import { Dimensions } from 'react-native' oben in Ihrer Datei.
  2. const { height } = Dimensions.get('window');

Jetzt wird die Höhe des Fensterbildschirms in der Höhenvariablen gespeichert.

Dhruvil Shah
quelle
1
Sie sind sich nicht sicher, warum Sie gerade mit derselben Antwort geantwortet haben? Was fügt das wirklich hinzu?
Rambatino
2

react-native-responsive-screen Habe gerade Repo hier entdeckt . Fand es sehr praktisch.

React-Native-Responsive-Screen ist eine kleine Bibliothek, die zwei einfache Methoden bietet, mit denen React Native-Entwickler ihre UI-Elemente vollständig reagieren können. Keine Medienabfragen erforderlich.

Es bietet auch eine optionale dritte Methode zur Erkennung der Bildschirmorientierung und zum automatischen erneuten Rendern nach neuen Dimensionen.

jfunk
quelle
0

Ich denke, die Verwendung react-native-responsive-dimensionskö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

Picacode
quelle