ReactNavigation

react navigation은 typescript로 작성되었기 때문에 typescript에 대한 유형 정의를 가지고 있다라우트 이름과 매개변수의 유형을 확인하려면 라우트의 매개변수에 대해 이름 매핑이 있는 객체 유형을 생성해야 한다ex) userId를 param으로

정의한 매개 변수 list object화면이 속한 route의 이름navigator의 ID (optional)navigator가 ID를 갖는다면 다음과 같이 할 수 있다이를 통해 navigate, push 등을 사용중인 route의 이름 및 params의 타입을 확인할

중첩된 화면에서 화면과 params 프로퍼티를 전달하면서 중첩된 네비게이터의 화면으로 이동할 수 있다

options을 화면에 전달하거나 Navigator component에 screenOptions prop을 전달할 때, 이미 type이 확인되어있기 때문에 특별히 따로 작업을 할 필요는 없다원한다면 옵션을 별도의 객체로 추출하고 annotate 할 수 있다options

useNavigation, Link ref 등의 API들에 수동으로 annotating을 하는 대신 기본 type으로 사용될 root navigator에 대해 전역 type을 선언할 수 있다전역 type을 사용하기 위해 코드 어딘가에 다음의 코드를 추가해야 한다Root

네비게이터 중첩은 다른 네비게이터의 화면 내에 또 다른 네비게이터를 렌더링 하는 것을 의미한다위의 예에서 Home component는 Tab 네비게이터를 포함한다Home 구성 요소는 App 구성 요소의 내부 stack 탐색기에서 Home 화면에서도 사용된다Tab nav

React Navigation 의 기본 색상은 약간 회색인 듯 보인다NavigationContainer 의 theme 속성에 색상 설정을 하여 색을 변경할 수 있다

React Navigation의 stack navigator 의 screenOptions 에는swipe 만 방지하는 기능이 없다swipe 말고 어떤 제스쳐가 있는지는 모르지만..gestureEnabled 을 false 로 주어 해결top tab navigator 에는

React Navigation 에서 nesting navigation 사용 시 OS 별 렌더링 차이가 있었다Android 의 경우 네비게이션 탭 접근 시해당 탭에 등록되어있는 각걱 stack 의 default 페이지가 한 번씩 전부 렌더링 된 후 캐싱이 된다top 1

React Navigation 에서 뒤로가기를 할 때React Navigation 의 useNavigation 에서 pop 메서드가 삭제되고StackActions 객체와 useNavigation 의 dispatch 를 이용해야 하는 것 같다

React Navigation 사용 시 Stack Navigation 의 Screen 에서 navigation 을 props 로 받아오는 경우RootStack 내부에 sign in 페이지가 있다면 아래와 같이 type 설정다른 페이지로 이동하려면 CompositeScr

oh.. ReactNavigation 의 인자로 NativeStackNavigationProp 제네릭에 유니온 타입을 줄 수 있다main 네비게이션 하위에 4개의 탭이 있을 경우원래 각각의 composite type 을 4개 만들어야하나 고민하였으나 main 하나에 나

bottom tab navigation 을 사용하더라도커스텀 tab bar 를 사용한다면 screenOptions={{ tabBarHideOnKeyboard: true,}}속성이 적용되지 않는다