모바일 애플리케이션은 다양한 화면이 상황에 맞게 전환된다. 상황에 맞는 화면 이동은 중요한 요소이기 때문에 일반적인 상황에서 내비게이션은 필수적인 기능이다.

1. navigation의 구조와 특징

1-1. < NavigationContainer > 컴포넌트

1-2. < Navigator > 컴포넌트

내비게이션을 구성하고 화면을 관리하는 관리자 역할

• Navigator 컴포넌트는 크게 Stack, Tab, Drawer 내비게이터를 제공합니다.
• Navigator 컴포넌트는 NavigationContainer 컴포넌트의 자식 컴포넌트여야 한다.

  <NavigationContainer> 
    <Navigator>
  	<Screen>
    </Screen>
  </Navigator>
  </NavigationContainer> 

1-3. < Screen > 컴포넌트

화면을 담당하는 컴포넌트.

• Screen 컴포넌트에는 화면으로 사용할 컴포넌트를 지정하는 component 속성과 화면의 식별자처럼 사용되는 name속성을 설정해야 한다.

• Screen 컴포넌트의 component로 지정돼서 화면으로 사용하게 되는 컴포넌트에는 props로 항상 navigation과 route가 전달된다.

  <Screen name="Home" component={Home} /> 
  <Screen name="Item" component={Item} />
  
  const Home = ({navigation, route}) => {...}

• Screen 컴포넌트는 반드시 navigator 컴포넌트의 자식 컴포넌트여야 한다.

  <Navigator>
  	<Screen>
    </Screen>
  </Navigator>

1-4. react navigation에서 옵션을 수정할 수 있는 곳

• Navigator 컴포넌트,Screen 컴포넌트, 화면으로 사용되는 component가 있다.
  • 각 위치에서 동일한 옵션을 설정했을 때 설정의 우선순위는 아래로 갈수로고 더욱 높다는 특징이 있다.

//1순위. 화면으로 사용되는 component
  const Home = ({navigation})=>{
	navigation.setOptions({...})
  }
//2순위. Screen 컴포넌트 
<Screen option={...}/>
//3순위. Navigator 컴포넌트
<Navigator screenOptions={...}/> 

라이브러리 설치

$ npm install @react-navigation/native
$ npm install @react-navigation/stack
$ npm install @rect-navigation/botton-tabs

https://reactnavigation.org/docs/getting-started/