[react-native] view 안에 text 옆으로 정렬하는 법

 

 

 

 

내일배움단 앱개발 수강이 끝나서 토이 프로젝트로 언어 발달센터를 확인할 수 있는 앱을 만들기 시작했다.

어우 내가 토이프로젝트라닠ㅋㅋㅋㅋㅋ 어차피 목적은 이것이었으므로 신나게 작업해보긔

 

 

 

---

일단 View와 ScrollView로 상단 타이틀과 하단 내용이 들어갈 공간을 구분해준다.

그리고 Card가 들어갈 곳(cardContainer)에 Text를 2개를 넣었더니 아래같이 나왔다.

 

 

 

cardName과 cardRating이 옆으로 나란히 있게 하고 싶은데 View 디폴트값이 flexDirection : column이라 밑으로 정렬되서 나온다. (수직정렬)

---

 

 

---

그러면 옆으로 나란히 있을 수 있도록 cardName과 cardRating을 감싸는 View를 하나 더 만들어주고,

그 VIew의 flexDirection을 'row'로 해 주면 된다.

 

 

짠! 옆으로 잘 붙었다. 그런데 너무 딱 붙어있는게 아쉽네. 

제목은 왼쪽 정렬, 평점은 오른쪽 정렬로 붙여주고 싶다.

---

 

 

---

좌우로 예쁘게 정렬되어야 하는 Text(cardName, cardRating)들을 감싸고 있는 card1 뷰태그에 

justifyContent: 'space-between'을 먹여준다.

 

 

위치는 잘 됐는데 .... 

같은 card1 안에 있는 똑같은 Text인데 cardNamed은 글자 크기에 딱 맞게 되있고

cardRating은 크게 공간을 차지하고 있다.

---

 

 

---

cardName에만 margin이 적용되어 있어서 그랬다.

cardRating에도 cardName과 똑같이 marginTop과 mnarginBottom을 먹여주자.

짠! 이제야 마음이 안정된닼ㅋㅋㅋㅋ 어우 저런거 너무 보기 싫어ㅋㅋㅋ