react-native에서 앱을 개발할 때 화면 구성을 어떻게 하는지에 대해서 포스트를 작성하려 한다.
앱은 웹과는 다르게 url을 통해서 html파일을 로딩받아 화면을 이동하는 것이 아닌 자체적으로
앱 자체적으로 레이어를 만든 후 옮겨다니는 형식이다. 이때 React-native로 어떻게 화면간에 이동을 하는지 알아보자.

React-native Navigation

길게 설명할 것 없다. 공식문서를 일단 쭉 읽어보자. Navigation을 이용해서 구성을 다양하게 할 수 있다.

코드를 보면 createBLAHBLAH 뭐시기 메소드가 있다. Navigation에는 여러가지 형태가 있는데 대표적으로 하단 네비게이션, 상단 네비게이션, 슬라이드 메뉴바 등등 여러개가 있다. 각 요소에 맞게 createBLAHBLAH 메소드가 있을텐데, 이 메소드는 네비게이션의 스택을 생성하는 역할을 한다.

Stack 이란?

스택에 화면의 정보 (id, component, ..)가 저장되고 stack내에서 화면을 호출하면서 바꿔가는 방식이다.

ossProject에서 사용하는 구조

Stack으로 처음에 초기화면,로그인버튼,회원가입버튼을 화면을 띄우고 각 화면으로 넘어갈 것이다.

초기화면을 넘긴다면 이제 TabNavigation을 이용해서 에타와 비슷한 환경을 개발할 것이다.

Navigation은 당연하게도 nesting이 가능하다. 단 는 App전체에서 오직 1개여야 한다

읽어보자.
https://reactnavigation.org/docs/nesting-navigators

*읽어봐야할 자료
https://reactnavigation.org/docs/tab-based-navigation