1. 새 프로젝트 생성 및 라이브러리 설치 react-native init [project-name] npm install --save axios@0.18.0 react-redux@6.0.1 redux@4.0.1 redux-promise@0.6.0 axio - promise API 를 활용하는 http 비동기 통신 라이브러리, 백엔드를 다룰 예정으로 필요 react-redux - react, redux UI binding redux - 사용 redux-promise - 미들웨어 사용 위해 필요 npm install @react-navigation/native navigation 설치 npm install react-native-gesture-handler navigation 관련 dependency 설치..

15. Nesting Navigators(화면 구조 설계) Stack, Drawer, Tab 여러 개의 navigator를 같이 쓰는 방법을 알아보자. react navigation에서는 navigator를 nesting한다고 표현한다. Navigator들과 스크린 간의 구조를 잡는 건데 어떤 structure를 잡느냐에 따라 다양한 설계가 가능하다. 1. stack, tab nesting stack navigator는 하위에 stack screen을 갖는데 여기서 하나의 stack screen에 컴포넌트로 tab navigator와 tab screen을 넣으면 된다. 자세한 구조는 아래 App.js 에서 주석으로 적어뒀다. MainScreen은 tab navigator와 하위의 tab screen들을 ..

15. React Native Vector Icons 활용 https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for i..

14. React Native Vector Icons 설치 https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for i..

13. [Tab] Style 설정 stack navigator, drawer navigator와 유사한데 tab navigator도 drawer navigator와 마찬가지로 각 Screen 컴포넌트에 개별 스타일링은 하지 않는다. 모두 공통적인 스타일을 갖게 되는 ui이기 때문에 navigator 태그 안에 스타일링을 준다. 각 탭에 그림을 삽입함과 동시에 선택되어진 탭의 크기를 좀 더 크게 키워주도록 해보자. 그럼 어떤 탭이 선택되었는지 알아야 하기 때문에 route를 파라미터로 넘겨준다. 원래는 tabBarOptions로 스타일을 정의했지만 이게 deprecated 되고 ScreenOptions를 사용하는 것으로 권장된다. 사실 tabBarOptions 안에 썼던 프로퍼티들 앞에 tabBar를 붙이..

12. [Tab] 설치 및 화면 Linking tab navigator는 화면 상단이나 하단에 탭을 생성해서 터치 시에 해당 스크린으로 이동하게 도와주는 navigator이다. https://reactnavigation.org/docs/tab-based-navigation https://reactnavigation.org/docs/tab-based-navigation/ reactnavigation.org 공식문서 보고 설치 따라서 하고 또다시 import 와 객체를 만들어 준 뒤에 사용! home_tab.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ i..