[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

리액트 네이티브에서 어플리케이션을 구현할 때, 화면의 넓이, 혹은 높이를 자동으로 측정하여 사용할 수 있는 API를 포스팅하려고 합니다.

바로 " Dimesions " 라는 API 인데요, react-native의 기본 컴포넌트 중 하나입니다.

■ 사용방법

import { Dimensions } from "react-native";

// 기본형은 width, height
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default function App() {
  return (
 	<View style={styles.container}>
    	<View style={styles.insideContainer} />
    </View>
  )
};

// STYLES
const styles = StyleSheet.create({
	container: {
    	flex: 1,
    	backgroundColor: 'orange',
    },
    insideContainer: {
    	width: SCREEN_WIDTH,
    }
});

이렇게 사용하시면 됩니다.

자동으로 모바일 기기의 전체 width를 탐지하고 적용. 

console.log로 찍어보면, 

console

꽉찬 가로 사이즈

 

이상입니다.