#3 레이아웃 : Flex, FlexDirection, alignItems

Flex는 컴포넌트의 크기비율을 정해준다.

 

      <SafeAreaView style={styles.container}>
        <View style={{flex: 1, backgroundColor: 'red'}} />
        <View style={{flex: 2, backgroundColor: 'orange'}} />
        <View style={{flex: 3, backgroundColor: 'yellow'}} />
      </SafeAreaView>

여기서 전체를 감싸는 safeAreaView (참고 : safeAreaView는 상태 바를 침범하지않는 View이다.)의 Flex를 1로 두고

그 안에 View를 다음과 같이 주면

Flex

이렇게 비율이 지정되어 뿌려진다.

 

---

FlexDirection에 따른 레이아웃

 

1. column & column-reverse

2. row & row-reverse

---

justifyContent에 따른 레이아웃

 

1. flex-start

2. center