React-Navigation

🎡React Navigation

React에서는 React-Router-Dom을 이용해서 페이지를 전환하지만, 회사에선 React-Native에서는 Navigation 라이브러리인 React Navigation을 사용한다고 했다.

RN(Routing)은 브라우저처럼 상단 탭이 존재하지 않는다. 페이지 간 이동이 쉽지 않을 뿐더러, 브라우저처럼 '뒤로가기'를 제공하기 때문에 라우팅 패스를 모두 기억해야 한다. 이를 지원하는 라이브러리가 react-navigation-stack입니다. 다만 deep하게 구성 할 수록 뒤로가기시 버벅임을 인지해야 합니다.

React-navigation-stack

React Native Navigation stack 설치

setting

react navigation 설치

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

*ios - install the pods (via Cocoapods) to complete the linking

npx pod-install ios

App.js
NaviationContainer 컴포넌트를 import 해준다.

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

---

1. CreateStackNavigator
   앱의 각 화면이 전환될 수 있는 기본 틀을 제공

2. RouteConfigs
   각 화면으로 안내해주는 표지판

3. StackNavigationConfig
   전체 길에 대한 안내를 담당. Modal로 띄울지, Screen으로 띄울지, user를 어딜 제일 처음 안내 할 지 같은 설정.

4. navigationOptions
   세부 설정. (Header, Tab, 등등)

CreateStackNavigator

React-navigation-tab

참고자료
React Ntaive Tutorial
React Navigation으로 로그인, 탭 네비게이터 화면 구성하기
React-Native Navigation(화면 전환)