Szerokość ekranu w React Native

Jak uzyskać szerokość ekranu w natywnym React?

(Potrzebuję tego, ponieważ używam pewnych absolutnych komponentów, które się nakładają, a ich pozycja na ekranie zmienia się z różnymi urządzeniami)

W React-Native mamy opcję o nazwie Dimensions

Uwzględnij wymiary u góry zmiennej, w której uwzględniono obraz, tekst i inne komponenty.

Następnie w swoich arkuszach stylów możesz użyć, jak poniżej,

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

W ten sposób można uzyskać okno i wysokość urządzenia.

Po prostu zadeklaruj ten kod, aby uzyskać szerokość urządzenia

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

Może to oczywiście, ale Dimensions jest importem natywnym dla reagowania

import { Dimensions } from 'react-native'

Bez tego wymiary nie będą działać

Jeśli masz komponent stylu, którego możesz wymagać od swojego komponentu, możesz mieć coś takiego na początku pliku:

const Dimensions = require('Dimensions');

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

Następnie możesz dodać fulscreen: {width: window.width, height: window.height},komponent Styl. Mam nadzieję że to pomoże

React Native Dimensions jest tylko częściową odpowiedzią na to pytanie, przyszedłem tutaj, szukając rzeczywistego rozmiaru ekranu w pikselach, a wymiary faktycznie zapewniają rozmiar układu niezależny od gęstości.

Możesz użyć opcji React Native Pixel Ratio, aby uzyskać rzeczywisty rozmiar ekranu w pikselach.

Potrzebujesz instrukcji importu zarówno dla Dimenions, jak i PixelRatio

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

Możesz użyć destrukturyzacji obiektów do tworzenia globalnych szerokości i wysokości lub umieszczać je w arkuszach stylów, jak sugerują inni, ale uważaj, to nie zaktualizuje się przy zmianie orientacji urządzenia.

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

Z dokumentów React Native Dimension :

Uwaga: Chociaż wymiary są dostępne natychmiast, mogą się zmienić (np. Z powodu obrotu> urządzenia), więc każda logika renderowania lub style zależne od tych stałych> powinny próbować wywoływać tę funkcję przy każdym renderowaniu, zamiast buforować wartość> (na przykład , używając stylów wbudowanych zamiast ustawiania wartości w arkuszu stylów).

Link PixelRatio Docs dla tych, którzy są ciekawi, ale niewiele więcej tam.

Aby faktycznie uzyskać rozmiar ekranu, użyj:

PixelRatio.getPixelSizeForLayoutSize(width);

lub jeśli nie chcesz, aby szerokość i wysokość były globalne, możesz ich użyć w dowolnym miejscu

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

React Native zawiera interfejs API „Dimensions”, który musimy zaimportować z pliku „React-Native”

import { Dimensions } from 'react-native';

Następnie,

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

10 kwietnia 2020 Odpowiedź:

Sugerowane użycie odpowiedzi Dimensionsjest teraz odradzane. Zobacz: https://reactnative.dev/docs/dimensions

Zalecanym podejściem jest użycie useWindowDimensionshooka w Reakcie; https://reactnative.dev/docs/usewindowdimensions, który korzysta z interfejsu API opartego na hakach, a także aktualizuje wartość, gdy zmienia się wartość ekranu (na przykład przy obracaniu ekranu):

import {useWindowDimensions} from 'react-native';

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

Uwaga: useWindowDimensionsjest dostępne tylko w React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Tylko dwa proste kroki.

1. import { Dimensions } from 'react-native' u góry pliku.
2. const { height } = Dimensions.get('window');

teraz wysokość ekranu okna jest przechowywana w zmiennej wysokości.

Właśnie odkryłem react-native-responsive-screen repozytorium tutaj . Okazało się to bardzo przydatne.

React-native-responsive-screen to mała biblioteka, która udostępnia 2 proste metody, dzięki którym programiści React Native mogą kodować elementy interfejsu użytkownika w pełni responsywnie. Żadne zapytania o media nie są potrzebne.

Zapewnia również opcjonalną trzecią metodę wykrywania orientacji ekranu i automatycznego ponownego renderowania zgodnie z nowymi wymiarami.

Myślę, że używanie react-native-responsive-dimensionsmoże pomóc ci trochę lepiej w twojej sprawie.

Nadal możesz otrzymać:

device-width za pomocą i responsiveScreenWidth(100)

i

wysokość urządzenia za pomocą i responsiveScreenHeight(100)

Możesz również łatwiej rozmieścić lokalizacje swoich absolutnych komponentów, ustawiając marginesy i wartości pozycji z proporcjonowaniem ich na 100% szerokości i wysokości