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

Ответ 1

В React-Native у нас есть параметр под названием Dimensions

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

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

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

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

Ответ 2

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

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

Может быть, это очевидно, но, Dimensions - это ответный импорт

import { Dimensions } from 'react-native'

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

Ответ 3

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

const Dimensions = require('Dimensions');

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

И тогда вы можете предоставить fulscreen: {width: window.width, height: window.height}, в своем компоненте Style. Надеюсь, что это поможет

Ответ 4

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

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

Требуется оператор импорта для Dimenions и PixelRatio

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

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

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

Из React Native Размер Документы:

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

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

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

PixelRatio.getPixelSizeForLayoutSize(width);

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

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

Ответ 5

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

import { Dimensions } from 'react-native';

Затем

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

Ответ 6

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

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

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

Ответ 7

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

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

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