Lebar layar di React Native

Bagaimana cara mendapatkan lebar layar di React native?

(Saya membutuhkannya karena saya menggunakan beberapa komponen absolut yang tumpang tindih dan posisinya di layar berubah dengan perangkat yang berbeda)

Di React-Native kami memiliki Opsi yang disebut Dimensi

Sertakan Dimensi di var atas di mana Anda telah menyertakan Gambar, dan Teks dan komponen lainnya.

Kemudian di Stylesheets Anda, Anda dapat menggunakan seperti di bawah ini,

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

Dengan cara ini Anda bisa mendapatkan jendela dan tinggi perangkat.

Cukup nyatakan kode ini untuk mendapatkan lebar perangkat

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

Mungkin jelas, tetapi Dimensi adalah impor asli bereaksi

import { Dimensions } from 'react-native'

Dimensi tidak akan berfungsi tanpa itu

Jika Anda memiliki komponen Style yang dapat Anda perlukan dari Komponen Anda, Anda dapat memiliki sesuatu seperti ini di bagian atas file:

const Dimensions = require('Dimensions');

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

Dan kemudian Anda bisa memasukkan fulscreen: {width: window.width, height: window.height},komponen Style Anda. Semoga ini membantu

React Native Dimensions hanyalah sebagian jawaban untuk pertanyaan ini, saya datang ke sini untuk mencari ukuran piksel layar yang sebenarnya, dan Dimensi sebenarnya memberi Anda ukuran tata letak independen kepadatan.

Anda dapat menggunakan React Native Pixel Ratio untuk mendapatkan ukuran piksel layar yang sebenarnya.

Anda memerlukan pernyataan import untuk Dimenions dan PixelRatio

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

Anda dapat menggunakan perusakan objek untuk membuat lebar dan tinggi global atau meletakkannya di stylesheet seperti yang disarankan orang lain, tetapi berhati-hatilah karena ini tidak akan diperbarui pada reorientasi perangkat.

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

Dari React Native Dimension Docs:

Catatan: Meskipun dimensi segera tersedia, dimensi tersebut dapat berubah (misalnya karena> rotasi perangkat) sehingga logika rendering atau gaya apa pun yang bergantung pada konstanta ini> harus mencoba memanggil fungsi ini pada setiap render, daripada menyimpan nilai> (misalnya , menggunakan gaya sebaris daripada menyetel nilai dalam StyleSheet).

PixelRatio Docs link untuk mereka yang penasaran, tetapi tidak lebih dari itu.

Untuk benar-benar mendapatkan ukuran layar, gunakan:

PixelRatio.getPixelSizeForLayoutSize(width);

atau jika Anda tidak ingin lebar dan tinggi menjadi global, Anda dapat menggunakannya di mana saja seperti ini

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

React Native hadir dengan api "Dimensions" yang perlu kita impor dari 'react-native'

import { Dimensions } from 'react-native';

Kemudian,

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

10 April 2020 Jawaban:

Penggunaan jawaban yang disarankan Dimensionssekarang tidak disarankan. Lihat: https://reactnative.dev/docs/dimensions

Pendekatan yang direkomendasikan adalah menggunakan useWindowDimensionshook di React; https://reactnative.dev/docs/usewindowdimensions yang menggunakan API berbasis hook dan juga akan memperbarui nilai Anda saat nilai layar berubah (misalnya pada rotasi layar):

import {useWindowDimensions} from 'react-native';

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

Catatan: useWindowDimensionshanya tersedia dari React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Hanya dua langkah sederhana.

1. import { Dimensions } from 'react-native' di atas file Anda.
2. const { height } = Dimensions.get('window');

sekarang tinggi layar jendela disimpan dalam variabel tinggi.

Baru saja menemukan react-native-responsive-screen repo di sini . Merasa sangat berguna.

react-native-responsive-screen adalah pustaka kecil yang menyediakan 2 metode sederhana sehingga pengembang React Native dapat mengkodekan elemen UI mereka sepenuhnya responsif. Tidak perlu kueri media.

Ini juga menyediakan metode ketiga opsional untuk deteksi orientasi layar dan perenderan otomatis sesuai dengan dimensi baru.

Saya pikir menggunakan react-native-responsive-dimensionsmungkin membantu Anda sedikit lebih baik dalam kasus Anda.

Anda masih bisa mendapatkan:

lebar perangkat dengan menggunakan dan responsiveScreenWidth(100)

dan

tinggi perangkat dengan menggunakan dan responsiveScreenHeight(100)

Anda juga dapat lebih mudah mengatur lokasi komponen absolut Anda dengan mengatur margin dan nilai posisi dengan proporsinya lebih dari 100% dari lebar dan tinggi.