[React Native] Native Stack Navigator

카테고리 : Development
태그: development, - React-Native - reactnative - Native Stack Navigator - Props - Options - Events - react-navigation/native-stack
등록일: 2023년 12월 25일
최근 업데이트: 2023년 12월 25일

---

• 🔥 1. Native Stack Navigator
• 🔥 2. Props
• 🔥 3. Options
• 🔥 4. Events

🔥 1. Native Stack Navigator

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

yarn add @react-navigation/native-stack

🔥 2. Props

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

🔥 3. Options

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

🔥 4. Events

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

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

   예시:

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

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

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

   예시:

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