Ширина экрана в React Native

Как получить ширину экрана в React native?

(Мне это нужно, потому что я использую некоторые абсолютные компоненты, которые перекрываются, и их положение на экране меняется на разных устройствах)

В React-Native есть опция "Размеры".

Включите размеры в верхнюю переменную, где у вас есть изображение, текст и другие компоненты.

Затем в таблицах стилей вы можете использовать, как показано ниже,

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

Таким образом можно получить окно устройства и высоту.

Просто объявите этот код, чтобы получить ширину устройства

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

Может быть, это очевидно, но Dimensions - это импорт для реакции

import { Dimensions } from 'react-native'

Размеры без этого работать не будут

Если у вас есть компонент Style, который вам может потребоваться от вашего Component, тогда у вас может быть что-то вроде этого в верхней части файла:

const Dimensions = require('Dimensions');

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

А затем вы можете добавить fulscreen: {width: window.width, height: window.height},в свой компонент Style. Надеюсь это поможет

React Native Dimensions - это лишь частичный ответ на этот вопрос, я пришел сюда, чтобы узнать фактический размер экрана в пикселях, а Dimensions фактически дает вам размер макета, не зависящий от плотности.

Вы можете использовать React Native Pixel Ratio, чтобы получить фактический размер экрана в пикселях.

Вам нужен оператор импорта для Dimenions и PixelRatio.

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

Вы можете использовать деструктуризацию объекта для создания глобальных переменных ширины и высоты или поместить его в таблицы стилей, как предлагают другие, но будьте осторожны, это не будет обновляться при переориентации устройства.

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

Из документов React Native Dimension :

Примечание: хотя размеры доступны сразу, они могут измениться (например, из-за> вращения устройства), поэтому любая логика или стили рендеринга, зависящие от этих констант>, должны пытаться вызывать эту функцию при каждом рендеринге, а не кэшировать значение> (например, , используя встроенные стили вместо установки значения в таблице стилей).

Ссылка на PixelRatio Docs для тех, кому интересно, но не более того.

Чтобы получить размер экрана, используйте:

PixelRatio.getPixelSizeForLayoutSize(width);

или если вы не хотите, чтобы ширина и высота были глобальными, вы можете использовать его где угодно, как это

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

React Native поставляется с api "Dimensions", который нам нужно импортировать из response-native.

import { Dimensions } from 'react-native';

Затем,

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

10 апреля 2020 Ответ:

Предлагаемый ответ использование Dimensionsтеперь не рекомендуется. См .: https://reactnative.dev/docs/dimensions

Рекомендуемый подход - использование useWindowDimensionsловушки в React; https://reactnative.dev/docs/usewindowdimensions, который использует API на основе хуков и также обновит ваше значение при изменении значения экрана (например, при повороте экрана):

import {useWindowDimensions} from 'react-native';

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

Примечание: useWindowDimensionsдоступно только в React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Всего два простых шага.

1. import { Dimensions } from 'react-native' вверху вашего файла.
2. const { height } = Dimensions.get('window');

теперь высота экрана окна сохраняется в переменной высоты.

Только что обнаружил react-native-responsive-screen здесь репо . Было очень удобно.

response-native-responsive-screen - это небольшая библиотека, которая предоставляет 2 простых метода, чтобы разработчики React Native могли кодировать свои элементы пользовательского интерфейса полностью адаптивно. Нет необходимости в медиа-запросах.

Он также предоставляет дополнительный третий метод для определения ориентации экрана и автоматического перерисовки в соответствии с новыми измерениями.

Я думаю, что использование react-native-responsive-dimensionsможет помочь вам немного лучше в вашем случае.

Еще можно получить:

ширина устройства с помощью и responsiveScreenWidth(100)

и

высота устройства с помощью и responsiveScreenHeight(100)

Вы также можете упростить расположение своих абсолютных компонентов, установив поля и значения положения с пропорциональным соотношением более 100% ширины и высоты.