(React-native) 디바이스 폭과 너비, FlatLists의 폭과 너비 확인하기

모바일 디바이스 장치의 폭과 너비를 알 수 있는 방법이 존재한다.

두가지 방법이 있는데, 아래와 같다.

(1) react-native의 Dimensions 모듈을 사용하는 방법

 : 스크린의 폭과 너비를 구할 수 있다.

import {
  Dimensions,
} from "react-native";

const width = Dimensions.get("screen").width;
const height = Dimensions.get("screen".height;

(2) react-native의 FlatLists 모듈을 사용하는 방법

  - 이건 FlatLists 자체의 폭과 길이를 알아오는 방법이다.

 - 따라서, FlatLists가 너비나 폭이 100% 이면 screen 과 사이즈가 같다.

 - 다른 경우에는 FlatLists 자체의 너비와 폭을 구할 수 있다. -> 사실, 이 경우가 더 유용할 수 있다. 

 

import {
  FlatList,
} from "react-native";

//...
    <FlatList
      data={data}
      renderItem={renderItem}
      numColumns={DIVNUM}
      style={{ zIndex: -1 }}
      onLayout={e => {
        console.log(e.nativeEvent.layout.width);
      }}
    />