React Native'de ekran genişliği

React native ile ekran genişliğini nasıl elde ederim?

(Buna ihtiyacım var çünkü çakışan bazı mutlak bileşenler kullanıyorum ve ekrandaki konumları farklı cihazlarla değişiyor)

React-Native'de Boyutlar adında bir Seçeneğimiz var

Görüntü, Metin ve diğer bileşenleri eklediğiniz en üst değişkene Boyutları ekleyin.

Ardından Stil Sayfalarınızda aşağıdaki gibi kullanabilirsiniz,

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

Bu şekilde cihaz penceresini ve yüksekliğini elde edebilirsiniz.

Cihaz genişliğini almak için bu kodu bildirmeniz yeterlidir

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

Belli olabilir, ancak Boyutlar react-native bir içe aktarmadır

import { Dimensions } from 'react-native'

Boyutlar bu olmadan çalışmaz

Bileşeninizden talep edebileceğiniz bir Stil bileşeniniz varsa, dosyanın en üstünde şuna benzer bir şey olabilir:

const Dimensions = require('Dimensions');

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

Ve sonra fulscreen: {width: window.width, height: window.height},Stil bileşeninizi sağlayabilirsiniz . Bu yardımcı olur umarım

React Native Dimensions, bu soruya yalnızca kısmi bir cevaptır, buraya ekranın gerçek piksel boyutunu aramaya geldim ve Boyutlar aslında size yoğunluktan bağımsız düzen boyutu verir.

Ekranın gerçek piksel boyutunu elde etmek için React Yerel Piksel Oranını kullanabilirsiniz.

Hem Dimenions hem de PixelRatio için import ifadesine ihtiyacınız var

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

Genişlik ve yükseklik küreselleri oluşturmak veya diğerlerinin önerdiği gibi stil sayfalarına yerleştirmek için nesne yok etmeyi kullanabilirsiniz, ancak bunun cihaz yeniden yönlendirmesinde güncellenmeyeceğine dikkat edin.

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

React Native Dimension Belgelerinden:

Not: Boyutlar hemen kullanılabilir olsalar da, değişebilir (örneğin> cihaz dönüşü nedeniyle), bu nedenle bu sabitlere bağlı herhangi bir işleme mantığı veya stili> değerini önbelleğe almak yerine her işlemede bu işlevi çağırmaya çalışmalıdır (örneğin , bir Stil Sayfasında bir değer ayarlamak yerine satır içi stilleri kullanma).

Meraklı olanlar için PixelRatio Docs bağlantısı, ancak daha fazlası değil.

Gerçekte ekran boyutunu elde etmek için şunu kullanın:

PixelRatio.getPixelSizeForLayoutSize(width);

veya genişliğin ve yüksekliğin global olmasını istemiyorsanız, bunun gibi herhangi bir yerde kullanabilirsiniz

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

React Native, "react-native" den içe aktarmamız gereken "Boyutlar" API'si ile birlikte gelir

import { Dimensions } from 'react-native';

Sonra,

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

10 Nisan 2020 Cevap:

Önerilen yanıtın kullanılması Dimensionsartık önerilmez. Bakınız: https://reactnative.dev/docs/dimensions

Önerilen yaklaşım, useWindowDimensionsReact'te kancayı kullanmaktır ; Kanca tabanlı bir API kullanan ve ayrıca ekran değeri değiştiğinde değerinizi güncelleyen https://reactnative.dev/docs/usewindowdimensions (örneğin ekran rotasyonunda):

import {useWindowDimensions} from 'react-native';

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

Not: useWindowDimensionsyalnızca React Native 0.61.0'da mevcuttur: https://reactnative.dev/blog/2019/09/18/version-0.61

Sadece iki basit adım.

1. import { Dimensions } from 'react-native' dosyanızın üstünde.
2. const { height } = Dimensions.get('window');

şimdi pencere ekranı yüksekliği yükseklik değişkeninde saklanır.

react-native-responsive-screen Depo burada yeni keşfedildi . Çok kullanışlı buldum.

react-native-responsive-screen, React Native geliştiricilerinin UI öğelerini tamamen uyumlu bir şekilde kodlayabilmeleri için 2 basit yöntem sağlayan küçük bir kitaplıktır. Medya sorgusuna gerek yok.

Ayrıca, ekran yönlendirme tespiti ve yeni boyutlara göre otomatik yeniden oluşturma için isteğe bağlı üçüncü bir yöntem sağlar.

Sanırım kullanmanın react-native-responsive-dimensionsdavanızda size biraz daha iyi yardımcı olabileceğini düşünüyorum .

Hala alabilirsiniz:

ve kullanarak cihaz genişliği responsiveScreenWidth(100)

ve

ve kullanarak cihaz yüksekliği responsiveScreenHeight(100)

Ayrıca, genişlik ve yüksekliğin% 100'ünden fazlasını oranlayarak, kenar boşlukları ve konum değerleri belirleyerek mutlak bileşenlerinizin konumlarını daha kolay düzenleyebilirsiniz.