[React Native] absolute 속성으로 가로 채우기(Full Width)

RN 에서 flex 를 사용하게되면 자동으로 최대 사이즈를 가지게 된다. absolute 를 사용하게 됐을 때 가로 채우는 방법을 포스팅하려한다. 매우 간단하지만 초반엔 width 를 가지고 해보았지만 자식 노드 스타일이 예상치 못하게 적용되어 다른 방법을 찾아보았다. 찾은 방법이 훨씬 간단하고 정답에 가까워 보인다. 아래 코드에서 top: 0 을 지우게 되어도 같은 결과가 나오게 된다. 만약 위 message 알림이 하단에 나오길 바란다면 top: 0 을 지우고 bottom: 0 을 주게 되면 된다. top: 0 과 bottom: 0 을 같이 사용하게 된다면 전체 화면을 사용할 수 있다.

	<View
		style={{
		    position: 'absolute',
		    top: 0,
		    left: 0,
		    right: 0,
		    alignItems: 'center',
		    backgroundColor: conceptColor.sky,
		}}
	>
	    <View style={{ height: 48 }} />
	    <Text>text</Text>
	</View>

위 코드의 실행 화면은 아래 사진과 같이 나온다. 

정리

top:0 => 상단 위치, 너비(width) 자식 노드의 스타일에 따라 유동적

left:0 => 왼쪽 위치, 너비(width) 자식 노드의 스타일에 따라 유동적

right:0 => 오른쪽 위치, 너비(width) 자식 노드의 스타일에 따라 유동적

Bottom:0 => 하단 위치, 너비(width) 자식 노드의 스타일에 따라 유동적

top:0, left:0, right:0 => 상단 위치, Full Width

bottom:0, left:0, right:0 => 하단 위치, Full Width

top:0, bottom:0, left:0, right:0 => Full Screen