리액트 네이티브로 날씨앱 만들기 #11 Working with Icons

이번에는 아이콘을 만들어보자 그전에 이 온도 텍스트를 크게 만들께

폰트 사이즈를 38 -> 48으로 변경 이 앱은 상태바(status bar)가 없으면 더 멋져보일꺼야 같이 보이니까 그닥 멋지지가 않아 다행히도 리액트 팀이 만든 api가 있어서 그것을 사용하면됨 status bar를 불러오도록 하자

이건 평범한 컴포넌트야 그래서 style을 사용할 수 있지 light 라고 작성하고 저장, 새로고침을 해서 확인해보자 안되는군! 구글에 검색해서 찾아보자 light-content 라고 작성해야함

수정하여 작성 저장, 새로고침 수정된 것이 보여? light, dark 에 따라 다르게 출력됨 그 말은, 이것도 해볼 수 있어 hidden을 작성! hidden = true 그러면 우리의 상태창이 보이지않게 가려줘 자, 이제 아이콘 작업을 해보자

다행히도 expo는 아이콘 관련된 멋진 패키지를 갖고있어 이름은 ion icon인데 정말 많은 종류의 아이콘을 보유하고 있지 오, 이름은 vector icon이야 쏘리 (-_-

) 이 패키지에는 아이콘 종류가 어마어마하게 많아

폰트어썸 아이콘을 포함해서 다양한 종류를 갖고있어 엑스포 덕분에 이렇게 편하게 아이콘을 사용할 수 있어 보다시피 entypo, foundation, 등등 다양한 종류 아이콘, 폰트어썸 이라는 단어가 낯설다면, 노마드 아카데미의 '카카오톡 클론' 을 공부하기를 바래

난 여기서 ion icon을 쓸꺼야 자, 이걸 불러오려면 다시 돌아가서 import ionicons 작성! 저장하고 오류 메세지 없는지 살펴보고 그리고 여기 텍스트를 아이콘으로 변경하자고 text를 ionicons로 변경 ion icons은 여러가지 props가 있는데, 그 중 하나가 색상이야 색상을 하얀색으로 지정

사이즈는144으로 한번 해보자 마지막은 아이콘의 이름이야 이 디렉토리에서 이름을 확인할 수 있어 이름이 뭔지 검색해보니까 ios-rainy 검색해서 다시 확인해보자

이름 확인 이게 내가 사용할 아이콘의 이름이야 이름 복사-붙여넣기 오류 발생!! (!?!?!?!) upper 컨테이너의 배경색상을 투명으로 지정! 이제 보이는구만! 아이콘의 부모인 upper 컨테이너 배경색을 투명으로 변경했어 자, 이제 아이콘이 잘 보이는 것을 확인했지? 그 외에 어떤 아이콘도 (ion icon 이라면) 사용할 수 있어

예를 들면 ios-closed-captioning 아이콘을 사용해보자 아이콘 이름 변경중 자, 변경된 것이 보이지? 이렇게 겁내 쉽게 아이콘을 붙여넣을 수 있어 기억해 expo에 이미 해당 패키지가 있기때문에 가능한거야 expo를 안쓰면 말짱황 우리가 expo를 쓰고있기때문에 이렇게 쉽게 활용이 가능한거야

이 경우가 아니라면 npm, yarn을 통해 설치해야해 허나 expo를 사용하면 이렇게 쉽게 불러올 수 있음 빠르게 복습해보자! ion icons을 불러오기 이 아이콘은 vector icons의 패밀리야 만약 원하면 font awesome을 불러올 수도 있어

ion icons을 불러온 후에, 3가지 종류의 props를 지정해줘 색상, 사이즈, 그리고 이름 해당 강의 영상 상단 혹은 하단에 아이콘 링크를 첨부할께 아이콘을 사용할때 정확한 이름을 복사-붙여넣기 하도록 해 만약 내가 이름에 오타를 내면, 아이콘이 정상으로 출력되지 않을꺼야 그리고 이렇게 우리가 선택할 수 있는 다른 아이콘 이름을 보여주지

여기까지야~ 참, 그리고 upper 컨테이너의 배경색을 투명으로 변경하는 것 잊지마! 내가 그걸 안해서 이렇게 하얀색으로 출력되었었지 배경색을 투명으로 변경해야 차일드인 아이콘이 정상으로 출력될거야 여기까지 디자인이 완료되었고- 이제 위치와 날씨 데이터를 불러오면 됨 씨유!