React Native의 화면 너비

React Native의 화면 너비

---

React Native에서 화면 너비를 어떻게 얻습니까?

(겹치는 일부 절대 구성 요소를 사용하고 화면에서의 위치가 다른 장치로 변경되기 때문에 필요합니다)

---

React-Native에는 Dimensions라는 옵션이 있습니다.

이미지, 텍스트 및 기타 구성 요소를 포함하는 상단 변수에 치수를 포함하십시오.

그런 다음 스타일 시트에서 아래와 같이 사용할 수 있습니다.

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},Style 구성 요소를 제공 할 수 있습니다 . 도움이 되었기를 바랍니다

---

React Native Dimensions는이 질문에 대한 부분적인 답변 일뿐입니다. 저는 여기에 화면의 실제 픽셀 크기를 찾아 왔으며 Dimensions는 실제로 밀도에 독립적 인 레이아웃 크기를 제공합니다.

React Native Pixel Ratio를 사용하여 화면의 실제 픽셀 크기를 얻을 수 있습니다.

Dimenions 및 PixelRatio 모두에 대한 import 문이 필요합니다.

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

객체 디스트 럭처링을 사용하여 너비 및 높이 전역을 만들거나 다른 사람이 제안한대로 스타일 시트에 넣을 수 있지만 장치 방향이 변경되면 업데이트되지 않습니다.

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

React Native Dimension 문서에서 :

참고 : 치수는 즉시 사용할 수 있지만 (예 :> 장치 회전으로 인해) 변경 될 수 있으므로 이러한 상수에 의존하는 모든 렌더링 논리 또는 스타일은> 값을 캐시하는 대신> (예를 들어 , StyleSheet에서 값을 설정하는 대신 인라인 스타일 사용).

PixelRatio 문서 링크는 호기심이 많지만 그 이상은 아닙니다.

실제로 화면 크기를 얻으려면 다음을 사용하십시오.

PixelRatio.getPixelSizeForLayoutSize(width);

또는 너비와 높이를 전역으로 사용하지 않으려면 다음과 같이 어디에서나 사용할 수 있습니다.

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

---

React Native는 'react-native'에서 가져와야하는 "Dimensions"API와 함께 제공됩니다.

import { Dimensions } from 'react-native';

그때,

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

---

방금 react-native-responsive-screen 여기서 repo를 발견 했습니다 . 매우 편리합니다.

react-native-responsive-screen은 React Native 개발자가 완전히 반응하는 UI 요소를 코딩 할 수 있도록 두 가지 간단한 메서드를 제공하는 작은 라이브러리입니다. 미디어 쿼리가 필요하지 않습니다.

또한 새로운 차원에 따라 화면 방향 감지 및 자동 다시 렌더링을위한 선택적 세 번째 방법을 제공합니다.

---

두 단계 만 거치면됩니다.

1. import { Dimensions } from 'react-native' 파일 맨 위에.
2. const { height } = Dimensions.get('window');

이제 창 화면 높이가 height 변수에 저장됩니다.

참고 URL : https://stackoverflow.com/questions/33804500/screen-width-in-react-native