[React Native] 스타일 박스 구조

목적: STEP1과 화살표가 나란히 양옆으로 위치를 원함

 

위기: inline-block이 RN에서 지원을 안하는지, 검정border가 text만큼 감싸게 하고싶다....

 

구조: 큰 Layout안에 2개의 Layout( 각각 text, icon)이 들어가있는 상태

text고 layout이고 width를 설정하지 않으면 저렇게 끝까지 가버린다.

---

flexWrap: 'wrap' 를 넣으면 제일 긴 STEP1의 크기에 맞춰 통일되게 작아진다.....
나는 화살표 border는 더 작게 만들고싶다 .....

flexWrap: 'wrap'

---

위의 코드를 지우고, flexDirection: 'row',를 넣어봤다.

border 박스도 내용물에 맞게 작아졌다. 더불러, 박스나열도 오른쪽으로 나란히 붙었다. 

flexDirection: 'row'

---

justifyContent: 'space-between'를 덛붙였다.

그랬더니 각자 양쪽으로 밀려났다.

flexDirection: 'row',
justifyContent: 'space-between'

 

해결됬다 오예

 

---

   개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D