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'

그것 없이는 치수가 작동하지 않습니다.

컴포넌트에서 요구할 수있는 스타일 컴포넌트가있는 경우 파일 상단에 다음과 같은 내용이있을 수 있습니다.

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>

2020 년 4 월 10 일 답변 :

를 사용하여 제안 된 답변 Dimensions은 이제 권장되지 않습니다. 참조 : https://reactnative.dev/docs/dimensions

권장되는 접근 방식은 useWindowDimensionsReact 에서 후크를 사용하는 것입니다 . https://reactnative.dev/docs/usewindowdimensions 는 후크 기반 API를 사용하며 화면 값이 변경 될 때 값을 업데이트합니다 (예 : 화면 회전).

import {useWindowDimensions} from 'react-native';

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

참고 : useWindowDimensionsReact 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');

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

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

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

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

사용 react-native-responsive-dimensions하는 것이 귀하의 경우에 조금 더 도움이 될 것이라고 생각 합니다.

여전히 다음을 얻을 수 있습니다.

및 사용하여 장치 너비 responsiveScreenWidth(100)

과

and를 사용하여 장치 높이 responsiveScreenHeight(100)

또한 너비와 높이의 100 % 이상 비율로 여백과 위치 값을 설정하여 절대 구성 요소의 위치를보다 쉽게 ​​정렬 할 수 있습니다.