Bildschirmbreite in React Native

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

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.

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

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

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

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>

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

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.

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.

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