TIL 57 | React-navigation

vi2920va·2022년 4월 29일
0

React-Native

목록 보기
1/1
post-thumbnail

✨React-navigation

React Nativwe 관련 라이브러리 중 스크린간 이동을 도와주는 라이브러리인 React-Navigation

react-navigation-statck

  • 웹 라우팅(Routing)이 RN Stack
  • RN은 모바일 앱 형태이기 때문에 브라우저(크롬, 익스폴로러 등)처럼 상단 탭이 존재하지 않는다.
  • 그렇기 때문에 페이지 간 이동이 쉽지 않을 뿐더라 이 와중에 브라우저처럼 '뒤로가기'를 제공하기 때문에 각 라우팅 패스트를 모두 기억해줘야한다.
  • 이를 지원하는 RN의 라이브러리가 react-navigation-stack이다. 다만, 페이지를 딥(deep)하게 구성할 수록 '뒤로 가기' 했을 때 버벅임은 알고 있어야 한다.

react-navigation-statck 4가지 개념

  • CreateStackNavigator
    앱의 각 화면이 전환될 수 있는 기분 틀을 제공

  • RouteConfigs
    CreateStackNavigator가 쭉 뻗은 도로를 제공해 주었다면 RouteConfigs는 그 도로를 이리 저리 꺽고 각 화면을 안내해주는 표지만 세우는 작업

  • StackNavigationConfig
    RouteConfigs가 각 길을 안내해주었다면, StackNavigationConfig는 전체 길에 대한 안내를 담당한다.

길을 Modal로 띄울지 Screen으로 띄울지, 아무것도 모르고 온 사람에게 어딜 제일 처음 안내 할 지 같은 설정을 담당한다.

  • navigationOptions
    각 길들의 세부 설정할 수 있다.

이 길은 콘크리트로 할 지, 흙길로 할 지 같은 Header에 표시 될 정보, Tab으로 표현할지 할 지여부, 각 버튼의 색상들 같은 가장 세부적인 설정들 이다.

총 26가지 정도로 이 마저도 세부의 세부 설정까지 있으니 입맛대로 찾아쓰면 된다.

profile
Front-end Developer 🌱

0개의 댓글