flexBox로 레이아웃을 구성함
너비와 높이를 입력해 레이아웃을 구성하지 않는다.
width, height를 사용하지 않는다.
기본적으로 flexContainer을 사용하기 때문에
flex Size를 주어 크기를 구성함(비율)
부모요소의 flex크기가 주어져야지만 자식요소의 flex크기를 지정할 수 있다.
1. View 컴포넌트
- 기본적으로 모든 View는 flex가 적용되어 있음.(flexDirection의 기본값은 column임)
2. ScrollView
웹에서는 요소의 크기가 화면을 넘어갈 경우 자동으로 스크롤이 생기는 반면,
앱애서는 그렇지 않는다. ScrollView를 사용하게되면 요소의 지정된 크기 내에서 스크롤이 생기게 된다.
style을 넣을경우 style={styles.aaa}
가 아닌 contentContainerStyle를 사용해
contentContainerStyle={styles.aaa}
위와 같이 작성해주어야 된다.
props
horizontal : true(수평), false(수직, 기본값)
pagingEnabled : true(페이징 형식), false(스크롤 값만큼 이동)
showsHorizontalScrollIndicator : true(기본값, 스크롤바 보임), false(스크롤바 숨김)
3. Dimensions
휴대폰의 width와 height를 가져올 수 있음
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
console.log(windowWidth, windowHeight);
//411.42857142857144 843.4285714285714
