React Native: 수직, 수평 센터 정렬 스타일링

수직, 수평 가운데 정렬 하는 스타일링 방법에 대해 알아보아요.

 

<Wrap>
	<Child/>
</Wrap/>

위와 같이 마크업을 했을 경우 <Child />를 수직 센터로 정렬하고 싶으시다면!

 

const Wrap = styled.View`
	position: absolute;
    top:0;
    bottom:0;
    justify-content: center;
    align-items: center;
`;

이렇게 스타일링을 해주면 되는데요, 

정리를 하자면! 해당 Wrap을 위로 아래로 쭉 늘려준다음에 그 공간에서 flex 관련 속성으로 센터를 잡아주는 겁니당.

위의 스타일링을 적용한 경우 수직 센터를 한 결과를 보여줍니다!