TIL: RN | box-sizing: 'border-box', <Text> boder radius - 221014

react native 의 css에는 box-sizing 속성이 없다
대신 모든 영역 외부 크기에 대해서 기본적으로 border-box 와 같이 동작한다

하지만 내부 css는 content-box 처럼 동작하는 것 같다

<View style={{ padding: 6, height: 24 }}>
	<Text style={{ lineHeight: 24 }}>hi</Text>  
</View>

위와 같이 바깥 View 영역에 height를 주고
Text 영역에 lineHeight를 주면 border-box와 같이 글자가 세로열 중앙에 위치할 줄 알았다
웹에서는 그렇게 동작하지만 react native 에서는
padding: 6 때문에 top, bottom 에 6만큼의 크기가 따로 잡힌다
때문에 Text 영역은 그만큼 아래로 밀리게 된다..

lineHeight 를 12로 주어 중앙에 맞출 수 있다

그냥 justifyContent를 center로 주는 방법으로 변경