디자이너의 네이티브 앱 개발 도전기 #22

StackView

납품 준비하다가 손이 지치고 어깨가 아파 쉬는 차원에서 브런치를 켰다.

참... 시스템 발전 없는 건 변함없구나 싶다.

플랫폼이라면 플랫폼이겠지만, 플랫폼 갖춰놓고 업그레이드는 하지 않고 이용만 하고 있으니 말이다.

물론 잘 못된 방향이라 하기엔 무리가 있으나 아쉬운 건 어쩔 수 없다.

이미지나 동영상을 캔버스로 드래그 앤 드롭할 수 있다던지.. 뭐 이런 거 좀 어떻게 안될까?

React Navigation 3.x의 drawer. StackNavigator와 연결된다.

어찌 되었든, 오늘도 앱 제작 이야기이다.

오늘은 Stackview를 완성하였다.

Setting 화면엔 about 페이지가 서브로 존재하고 add location 페이지도 서브로 존재한다.

setting 화면에서 무언가 누르면 서브페이지로 이동하는 것.

헌데 이게 웹처럼 단순하지 않다.

각 각의 screen들을 stack으로 묶고 props와 함께 넘겨줘야 한다.

디자인이 많이 정리되지 않은 모습인데 곧 전체적으로 다듬을 예정이다.

가장 힘들었던 부분은 sub screen의 header 튜닝이었다.

어떠한 이유에서였는지 header 스타일과 headerLeft(헤더의 왼쪽 영역을 말한다. 이를테면 openDrawer나 goBack)이 작동을 하지 않았다.

동영상에서 보이는 이상한 아이콘은 다른 데서 사용하던 아이콘을 샘플로 사용한 것.

이제 stack view를 완성했으니 징글징글했던 setting을 마무리지을 차례다.

아 물론. 한 방에 끝나진 않을 것이다.

화씨와 섭씨를 변경하는 기능과 속도 m/mi를 변경하는 기능을 넣어야 한다.

값이 항상 저장되어야 하므로 또다시 async를 사용해야 하는데 생각만으로도 스트레스다.

그리고 현재 디폴트 지역도 설정해줘야 한다.

모두 async에 저장 후 앱이 로딩되며 기본 state에 넣어 앱 데이터 자체를 해당 state 기반으로 랜더링 시킬 예정이다.