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
권장되는 접근 방식은 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
답변
두 단계 만 거치면됩니다.
import { Dimensions } from 'react-native'
파일 맨 위에.const { height } = Dimensions.get('window');
이제 창 화면 높이가 height 변수에 저장됩니다.