2019/09/29 날씨 맑음
오늘은 어제 UI를 통해서 그린 그림을 가지고, 실제로 프로젝트에 적용하는 작업을 하였습니다.
위에 화면이 저녁 밥 먹고 21시부터 시작해서 23시까지의 결과 물입니다. 코드는 github에 들어가시면 확인하실수 있습니다.
간단하게 과정을 설명해드리면,
지금 보이는 설정 화면과 디테일 화면사이에는 createStackNavigator로 연결을 했으며,
거기서 만들어진 TimeStack을 TabNavigator에 연결해주는 방식으로 구현을 했습니다.
밑에 보이는 navigationOptions가 아래쪽에 한번 더 정의 되어 있는 이유는 위에 StackNavigator로 구성을 하고 추가를 하였을 경우에 UI Tab 화면에 아이콘이 보이지 않는 이슈가 있어서, 이슈에 대해서 찾아보다가 결국 찾지 못해서 저렇게 코드를 한번 더 Navigator 만들때 추가로 정의했습니다.
* 혹시 이 이슈 해결방법에 대해 아시는분 코멘트 부탁드립니다.
내가 보기에도 허접한 화면에 달랑 페이지 두개. 실제 작업은 30분도 안걸렸지만, 이제 한시간 반 동안 제가 어떤 삽질을 했으며, 또 그걸 해결하기 위해서 어떻게 해야하는지 적을까 합니다.
React-native가 기본적으로 제공하는 유저 Input을 받을수 있는 Components는 TextInput 와 Picker 입니다.
기본적인 웹에서 사용하는 form 과 같은 tag를 사용하고 싶을때는, react-native에서 구현되어있는 package를 설치해서 사용하면 더 정신건강에 좋습니다. 어떤 library를 사용해야할지 모르겠어서 어떻게 할지 찾아보다가 awesome-react-native란 사이트를 찾아서 여기서 필요한 기능별 library를 추가하면 편하게 사용하실수 있습니다.
화면을 그리는것에 대해서 흥미가 없다보니 더 오래 걸렸고, 내일부터는 넘어오는 파라미터와 데이터를 기반으로 허접하지만 돌아가는 Timer 로직을 짜도록 하겠습니다.
UI는 추후에 따로 검색을 하거나 조언을 받아서 이쁘게 만들어야겠네요.
댓글 없음:
댓글 쓰기