Ширина екрана в 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, який ви можете вимагати від свого компонента, ви можете мати щось подібне у верхній частині файлу:

const Dimensions = require('Dimensions');

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

І тоді ви могли б вказати fulscreen: {width: window.width, height: window.height},в своєму стилі компонент. Сподіваюся, це допомагає

React Native Dimensions - лише часткова відповідь на це запитання, я прийшов сюди, шукаючи фактичний розмір пікселя екрана, і Dimensions фактично дає вам незалежний від щільності розмір макета.

Ви можете використовувати коефіцієнт реактивних пікселів React, щоб отримати фактичний розмір пікселя на екрані.

Вам потрібна операція імпорту для Dimenions, так і PixelRatio

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

Ви можете використовувати деструктуризацію об'єктів для створення глобальних ширин та висот або розміщувати їх у таблицях стилів, як пропонують інші, але остерігайтеся, що це не буде оновлено при переорієнтації пристрою.

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

З Документів " Реактивний власний вимір" :

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

PixelRatio Docs посилання для тих, хто цікавий, але не набагато більше.

Щоб фактично отримати розмір екрана, використовуйте:

PixelRatio.getPixelSizeForLayoutSize(width);

або якщо ви не хочете, щоб ширина і висота були глобальними, ви можете використовувати його в будь-якому місці

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

React Native поставляється з api "Розміри", які нам потрібно імпортувати з "реагуючих".

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 тут репо . Знайшов це дуже зручно.

react-native-respo-screen - це невелика бібліотека, яка пропонує 2 прості методи, щоб розробники React Native могли повністю кодувати свої елементи інтерфейсу. Медіа-запити не потрібні.

Він також пропонує необов'язковий третій метод виявлення орінації екрану та автоматичного відтворення відповідно до нових розмірів.

Я думаю, що використання react-native-responsive-dimensionsможе допомогти вам трохи краще у вашому випадку.

Ви все ще можете отримати:

ширина пристрою за допомогою та responsiveScreenWidth(100)

і

висота пристрою за допомогою та responsiveScreenHeight(100)

Ви також можете легше впорядкувати розташування ваших абсолютних компонентів, встановивши поля та значення позицій, розподіляючи їх на 100% ширини та висоти