[React Native] navigation

모바일 애플리케이션은 하나의 화면으로 구성되는 경우가 거의 없으며, 일반적으로 다양한 화면이 상황에 맞게 전환되면서 나타난다. 그렇기 때문에 내비게이션은 모바일 애플리케이션에서 가장 중요한 기능 중 하나라고 할 수 있다.

 

라이브러리 설치

💻 npm install styled-components

💻 npm install —save @react-navigation/native

💻 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

RN 내비게이션

-NavitaionContainer 컴포턴트, Navigator 컴포턴트, Screen 컴포턴트가 있음 

• Screen 컴포넌트 : 화면으로 사용되는 컴포넌트로 name과 component 속성을 지정해야 함

• name은 화면 이름으로 사용되고 component에는 화면으로 사용될 컴포넌트를 전달함
• 화면으로 사용되는 컴포넌트에는 항상 navigation과 route가 props로 전달된다는 특징이 있음

• Navigator 컴포넌트 : 화면을 관리하는 중간 관리자 역할로 내비게이션을 구성하며, 여러 개의 Screen 컴포넌트를 자식 컴포넌트를 갖고 있음
• NavitaionContainer 컴포넌트 : 내비게이션의 계층 구조와 상태를 관리하는 컨테이너 역할을 하며, 모든 내비게이션 구성 요소를 감싼 최상위 컴포넌트여야 함

 

설정 우선 순위

설정할 수 있는 다양한 속성을 수정하는 방법

1. Navigator 컴포넌트의 속성으로 수정하는 방법
2. Screen 컴포넌트의 속성으로 수정하는 방법
3. 화면으로 사용되는 컴포넌트의 props로 전달되는 navigation을 이용해서 수정하는 방법

 

작은 범위의 설정일수록 우선순위가 높음

3. props > 2. screen > 1. Navigator 

 

 

스택 내비게이션 

💻 npm install —save @react-navigation/stack