반응형
가운데 정렬하는 법은 여러 가지가 있지만 가장 많이 사용하는 방법으로
flex 설정 된 <태그>에 justifyContent와 alignItems속성을 추가로 사용해서 'center'로 지정해 주면 됩니다.
즉, 컨테이너 내부의 요소를 가로와 세로로 가운데 정렬할 수 있습니다.
예제코드를 확인해주세요
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{/* 내용을 가운데로 정렬할 컴포넌트 */}
</View>
왼쪽 : 사용 전
오른쪽 : 사용 후
flex 속성이 들어가면서 버튼들이 가로로 넓게 잡지 않고 자기 자신 크기 만큼 잡아버리네요
왠지 모르게 자주 사용하는 건데 계속 검색하게 되네요.
728x90
반응형
'Front End > React, ReactNative' 카테고리의 다른 글
| reactNative axios get요청 보내기 localhost -> 192.168.0...... (0) | 2023.11.21 |
|---|---|
| React Native stack navigation 스택 내비게이션 사용해 화면 전환하기 (0) | 2023.06.26 |
| React ReactNative state에 데이터가 있다면 map() 사용하기, useEffect state 재랜더링, loding 자주 사용되는 로직 (0) | 2023.06.23 |
| React-Native란 react native 프로젝트 생성하기 Expo, 안드로이드 스튜디오 (0) | 2023.06.19 |
| React 시작하기, node.js란 무엇일까, npm 다운로드 (2) | 2023.06.05 |
