1. navigation - props 종류
1) navigate
해당 경로가 스택에 없는 경우 네이티브 스택 네비게이터에 새로운 경로를 푸시(push)하고, 이미 스택에 있는 경우 해당 화면으로 이동합니다.
navigate 는 다음과 같은 파라미터를 받는다.
navigate('Screen name', params)즉, 현재 스크린과 다음 이동 할 스크린이 같지 않다면 계속해서 stack 쌓는다.
단, 중첩 된 네비게이터에서 스택을 쌓으며 이동이 가능하다.
반대로 동일한 Screen을 계속 navigate 로 이동하면 스택이 쌓이지 않는다. (실제로 아무 일도 일어나지 않는다.)
테스트는 여기서 확인해 볼 수 있다.
2) push
원하는 만큼 호출할 수 있으며, 이는 계속해서 경로를 스택에 푸시(push)할 것입니다.
push 는 다음과 같은 파라미터를 받는다.
push('Screen name', params)navigate와 동일한 구조임을 알 수 있다.
navigate 와 차이점은 바로, 동일한 스크린이든 아니든 무조건 스택을 쌓는다는 것이다.
테스트는 여기서 확인해 볼 수 있다.
3) reset
reset에 지정된 상태 객체는 기존의 네비게이션 상태를 새로운 것으로 대체합니다. 즉, 기존 화면을 제거하고 새로운 화면을 추가합니다.
reset 는 다음과 같이 사용한다.
reset({
routes: [{ name: 'Screen name', params: 선택 }],
});보통 다른 경로의 새로운 스택으로 갈 때 사용한다.
그런데, 아래 이미지처럼 마지막 페이지에서 뒤로가기를 막아야할 때도 사용될 수 있다.
출처: 하이제니스: 천동이님 블로그
첫번째~세번째 페이지에서는 스와이프로 뒤로가기가 가능한데, reset 을 사용한 마지막 페이지에서는 뒤로가기가 안되는 것을 확인할 수 있다.
또한, 뒤로가기가 안되므로 상단 header에서 haederLeft 속성이 자동으로 null로 되어 없어진다.
4) replace
스택 내의 현재 화면을 새로운 화면으로 교체합니다.
replace는 다음과 같이 사용한다.
replace('Screen name', params)현재 스크린을 다른 스크린으로 교체하는 메소드이다.
reset 은 다른 스크린으로 교체하면 모든 스택이 초기화 되지만,
replace 는 그 전에 쌓인 스택은 그대로 유지하고 현재 화면만 다른 스크린으로 교체하는 것이기 때문에 뒤로 가기 시도 시 이 전에 쌓였던 스택을 볼 수 있다.
5) popToTop
스택이 여러 개 쌓였을 경우, 쌓인 스택의 제일 첫 번째 스크린으로 한번에 이동합니다.
popToTop 사용법은 다음과 같다.
popToTop()6) setParams
현재 화면의 매개변수
route.params를 업데이트할 수 있습니다.setParams는 React의useState와 유사하게 작동하며, 제공된 매개변수 객체를 현재 매개변수와 얕은 병합(shallow merge)합니다.
setParams 사용법은 다음과 같다.
setParams({
routeParams이름1: 바꿀 내용,
routeParams이름2: 바꿀 내용,
...
})테스트는 여기서 해볼 수 있다.
7) setOptions
setOptions 메서드를 사용하면 컴포넌트 내부에서 화면 옵션을 설정할 수 있습니다. 이는 컴포넌트의 프롭스, 상태 또는 컨텍스트를 사용하여 화면을 구성해야 할 경우 유용합니다.
필자는 주로 header를 customizing 하여 새롭게 UI를 만들고 싶을 때 주로 사용한다.
// 이 코드는 앱 상단 title의 명칭이 value라는 useState에 맞춰 변한다.
useEffect(() => {
navigation.setOptions({
title: value === '' ? 'No title' : value,
});
}, [navigation, value]);8) isFocused
현재 화면이 포커스를 가지고 있는지 확인할 수 있습니다. 화면이 포커스를 가지고 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
isFocused 의 사용법은 다음과 같다.
const isFocused = navigation.isFocused();이 메서드는 값이 변경될 때 화면을 다시 렌더링하지 않으며 주로 콜백(callbacks)에서 유용하다. 직접적으로 이를 사용하는 대신 useIsFocused 를 사용하는 것이 좋다.
useIsFocused 는 화면이 포커스를 가지고 있는지 여부를 나타내는 boolean을 반환합니다.
2. route - props 종류
1) params
route.params
navigate와 같이 탐색 중에 정의된 매개변수를 포함하는 선택적인 객체입니다.
예를 들어,
navigate('Twitter', { user: 'Dan Abramov' })에서 사용된 것처럼 정의됩니다.
2) key
route.key
화면의 고유 키입니다. 이는 자동으로 생성되거나 이 화면으로 이동하는 동안 추가됩니다.
3) name
route.name
화면의 이름입니다. 내비게이터 컴포넌트 계층 구조에서 정의됩니다.
4) path
route.path
화면이 딥 링크를 통해 열렸을 때 해당 화면을 열었던 경로를 포함하는 선택적인 문자열입니다.
