Native Stack Navigator

🔥 1. Native Stack Navigator

Native Stack Navigator는 각 새 화면이 스택의 맨 위에 배치되어 화면 간 전환을 제공하는 방식을 제공
iOS에서는 네이티브 API인 UINavigationController를 사용하고 Android에서는 Fragment를 사용하여 createNativeStackNavigator으로 구축된 네비게이션이 네이티브로 구축된 앱과 완전히 동일한 동작과 성능 특성을 갖도록함

yarn add @react-navigation/native-stack

🔥 2. Props

id: 네비게이터에 대한 선택적인 고유 식별자입니다. 이를 이용하여 navigation.getParent를 사용하여 자식 네비게이터에서 이 네비게이터를 참조할 수 있습니다.
initialRouteName: 네비게이터가 처음 로드될 때 렌더링할 라우트의 이름입니다. 이 이름은 네비게이터가 시작될 때 표시할 초기 화면을 결정합니다.
screenOptions: 네비게이터 내의 화면에 대한 기본 옵션입니다. 이 옵션은 네비게이터 내 모든 화면에 적용됩니다. 이를 통해 모든 화면에 동일한 설정을 적용하거나 일부 화면에만 적용할 특정 설정을 설정할 수 있습니다.

🔥 3. Options

title: 네비게이션 헤더의 기본 제목으로 사용될 문자열입니다.
headerBackButtonMenuEnabled: iOS 버전이 14 이상일 때 백 버튼을 롱프레스하면 메뉴를 보여줄지 여부를 나타내는 부울 값입니다. 기본값은 true입니다.
headerBackVisible: 헤더에 백 버튼이 표시되는지 여부입니다. headerLeft와 함께 사용하여 백 버튼을 표시할 수 있습니다.
headerBackTitle: iOS에서 백 버튼에 사용할 타이틀 문자열입니다. 이전 화면의 제목이 기본값이며 공간이 부족한 경우 "Back"으로 표시됩니다.
headerBackTitleVisible: 백 버튼 타이틀이 표시되는지 여부입니다.
headerBackTitleStyle: 헤더 백 타이틀의 스타일 객체입니다. fontFamily, fontSize 등의 속성을 지원합니다.
headerBackImageSource: 헤더에서 백 버튼에 표시할 이미지입니다. 플랫폼에 따라 기본값으로 iOS에는 chevron, Android에는 화살표가 사용됩니다.
headerLargeStyle: 큰 타이틀이 표시될 때 헤더의 스타일입니다. headerLargeTitle이 true이고 스크롤 가능한 내용이 헤더와 일치하는 가장자리에 도달할 때 큰 타이틀이 표시됩니다.
headerLargeTitle: 스크롤 시 일반적인 헤더로 축소되는 큰 제목이 있는 헤더를 활성화할지 여부입니다. ScrollView 또는 FlatList와 같은 스크롤 가능한 뷰로 화면 내용을 감싸야 합니다.
headerLargeTitleShadowVisible: 큰 제목이 표시될 때 헤더의 드롭 쉐도우가 보이는지 여부입니다.
headerShown: 헤더를 표시할지 여부입니다. 기본적으로 헤더가 표시됩니다. false로 설정하면 헤더를 숨깁니다.
headerStyle: 헤더의 스타일 객체입니다. backgroundColor, headerShadowVisible 등의 속성을 지원합니다.
headerTransparent: 네비게이션 바가 투명한지 여부를 나타내는 부울 값입니다. true로 설정하면 헤더가 절대적으로 위치하여 내용 아래로 겹쳐지도록 만듭니다.
headerBlurEffect: 투명한 헤더의 블러 효과입니다. headerTransparent 옵션이 true로 설정되어야 합니다.
headerBackground: 헤더의 배경으로 사용할 React Element를 렌더링하는 함수입니다. 이미지나 그라디언트와 같은 배경을 사용하는 데 유용합니다.
headerTintColor: 헤더의 틴트 색상입니다. 백 버튼과 제목의 색상을 변경합니다.
headerLeft: 헤더 왼쪽에 표시할 요소를 반환하는 함수입니다. 백 버튼을 대체합니다.
headerRight: 헤더 오른쪽에 표시할 요소를 반환하는 함수입니다.
headerTitle: 헤더에서 사용할 문자열 또는 React Element를 반환하는 함수입니다. 기본값은 화면의 제목 또는 이름입니다.
headerTitleAlign: 헤더 제목을 어떻게 정렬할지 나타내는 값입니다. left, center 등의 값이 가능하지만 iOS에서는 항상 center로 고정되어 있습니다.
headerTitleStyle: 헤더 제목의 스타일 객체입니다. fontFamily, fontSize 등의 속성을 지원합니다.
headerSearchBarOptions: iOS에서 네이티브 검색 바를 렌더링하는 옵션입니다. autoCapitalize, autoFocus 등의 속성을 지원합니다.
header: 기본 헤더 대신에 사용할 커스텀 헤더를 지정하는 함수입니다. navigation, route, options, back을 포함하는 객체를 받습니다.
statusBarAnimation: 상태 표시줄 애니메이션을 설정하는 값입니다. iOS에서는 fade 기본값이며 Android에서는 none입니다.
statusBarHidden: 이 화면에서 상태 표시줄을 숨길지 여부입니다.
statusBarStyle: 상태 표시줄 색상을 설정하는 값입니다. auto, inverted, dark, light 등의 값이 가능합니다.
statusBarColor: 상태 표시줄 색상을 설정하는 값입니다. Android에서만 지원됩니다.
statusBarTranslucent: 상태 표시줄의 투명도를 설정하는 부울 값입니다. Android에서만 지원됩니다.
contentStyle: 화면 내용의 스타일 객체입니다.
customAnimationOnGesture: 제스처를 사용하여 화면을 닫을 때 제공된 애니메이션을 사용할지 여부를 나타내는 부울 값입니다.
fullScreenGestureEnabled: 전체 화면에서 제스처를 사용하여 화면을 닫을지 여부를 나타내는 부울 값입니다.
gestureEnabled: 이 화면에서 제스처를 사용하여 닫을 수 있는지 여부입니다.
animationTypeForReplace: 이 화면이 다른 화면을 대체할 때 사용할 애니메이션 유형입니다.
animation: 화면을 푸시하거나 팝할 때 화면을 어떻게 애니메이션화할지 나타내는 값입니다.
presentation: 화면이 표시될 방법을 나타내는 값입니다.
orientation: 화면의 디스플레이 방향을 설정하는 값입니다.
autoHideHomeIndicator: 홈 인디케이터가 숨겨져야 하는지 여부를 나타내는 부울 값입니다.
gestureDirection: 화면을 닫기 위해 스와이프할 방향을 설정하는 값입니다.
animationDuration: iOS에서 slide_from_bottom, fade_from_bottom, fade 및 simple_push 전환의 지속 시간을 변경하는 값입니다.
navigationBarColor: 네비게이션 바 색상을 설정하는 값입니다.
navigationBarHidden: 네비게이션 바를 숨길지 여부를 나타내는 부울 값입니다.
freezeOnBlur: 비활성화된 화면이 리렌더링되지 않도록 방지할지 여부를 나타내는 부울 값입니다.

🔥 4. Events

transitionStart: 이 이벤트는 현재 화면의 전환 애니메이션이 시작될 때 발생합니다.

이벤트 데이터:
- e.data.closing: 화면이 열리는지 닫히는지를 나타내는 부울 값입니다.

예시:

javascriptCopy code
React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionStart', (e) => {
    // 여기서 무언가를 수행합니다
  });
 
  return unsubscribe;
}, [navigation]);

transitionEnd: 이 이벤트는 현재 화면의 전환 애니메이션이 종료될 때 발생합니다.

이벤트 데이터:
- e.data.closing: 화면이 열리거나 닫혔는지를 나타내는 부울 값입니다.

예시:

javascriptCopy code
React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionEnd', (e) => {
    // 여기서 무언가를 수행합니다
  });
 
  return unsubscribe;
}, [navigation]);