[React Native] Navigation 에서 주로 사용하는 개념

Stack Navigatior Screen Options

화면 이동 애니메이션

Card: 오른쪽에서 왼쪽으로 이동

Modal: 아래에서 위로 이동

 

Tab Navigatior Screen Oprions (BackBehavior)

• android 에서 H/W Back Button 눌렀을 때 이동하는 방법 지정
• firstRout: 선언상 제일 처음에 있는 탭으로 이동
• initialRoute: 최초 지정한 탭으로 이동
• order: 탭을 선언한 순서로 이동 stack output
• history: 이동한 히스토리 역순으로 이동

Nesting Navigatior ***

Navigatior 의 Screen dmf Component가 아닌 다른 Navigatior 로 선언하는 것

Presentation 을 다르게 선언하거나, 조건에 따라 Navigator 의 분기가 필요할 때 사용

주의 할 점

• Navigatior 는 각자의 History를 가지고 있음.
• Navigatior 에서 Screen Param은 전달되지 않음. (NavigatorA의 param을 NavigatorB가 알지 못함.)
• 현재 Navigator 에서 동작할수 없는 Action을 받을 경우 상위 Navigator로 전달 됨. (navigate 함수로 상위 Navigatior의 screen 으로 이동하게 되면 현재 Navigatior의 히스토리가 사라지게됨. but push 함수를 이용하면 현재 Navigatior 위에 상위 Navigatior의 stack 이 쌓이게 됨.)
• 상위 Navigator 의 이벤트를 하위 Navigator 에서 받을 수 없음. (필요한 경우 gerParent이용.) navigation.getParent().addListener('tabPress', (e)=>{})
• Tab, Drawer의 하위 Navigator일 경우 Tab, Drawer에 가려짐.

DeepLink

특정 URL을 누르면 지정한 화면으로 이동하는 것.

androrid: App Link, ios: Universal Link

엡마다 유효한 scheme를 가지고 있는데 이 scheme로부터 시작함.

따라서 scheme는 각각 플랫폼에서 도메인 인증단계를 통과해야 함.

uri에서 https:// 에 해당되는데 이 부분을 앱마다 다르게 설정한 뒤 path 에 화면을 나타냄.

https://path.iejfiejfie

 

Action

화면이동에 대한 명령어들을 담고 있는 Object

 

Action 구조

type: 어떤 작업인지 나타내는 식별자

payload: 추가 정보를 포함함. (parameter)

 

CommonAction

• navigate: 특정 화면으로 이동하는 action (name, key, param, ...)
• reset: 현재 상태를 지정한 상태로 변경해주는 action (login, logout 시 비로그인 시 볼 수 있는 화면들에서 로그인 했을 때 볼 수 있는 화면으로 이동할 때 또는 그 반대의 경우 사용)
• goBack: 히스토리에 존재하는 이전 화면으로 이동해주는 action

StackAction

push: 새로운 화면을 최상단에 넣는것

pop: 현재 보이고 있는 화면을 꺼내는 것

 

TabAction

jumpTo: 탭간 이동해야 할 때 사용