Flexbox

이전 예제에서 리스트를 많이 추가하였을 때 화면에 다 담지 못하는 오류

Flat List는 상단에 있는 콘텐츠에 의해 화면 밖으로 밀려난다.

 

→ 많은 내용을 담아야하는 리스트, 복잡한 리스트를 구현할 때는 FlexBox 를 사용해서 화면 전체를 차지하도록 해야함

const styles = StyleSheet.create({
    container:{
        flex:1,
        paddingTop:40,
        backgroundColor:'#ddd',
    },

})

 

Flex

• 레이아웃 구성의 가중치
• 엘리먼트가 한개면 1 은 100%, 두 개면 1은 50% 의미
• flex:1을 주면 화면 전체를 차지함