잠시만 기다려 주세요.
bunx expo로 프로젝트를 시작하고 react-navigation-drawer 패키지를 설치하는 것부터 시작합니다. 📦expo-router/drawer의 Drawer 컴포넌트를 사용하여 드로어 레이아웃을 구성하며, 파일 시스템 기반 라우팅으로 화면을 자동으로 인식합니다. 🏗️GestureHandlerRootView로 감싸는 것이 중요합니다. 👋Drawer.Screen을 사용하여 드로어에 표시할 화면을 명시적으로 정의하고, 각 화면에 대한 세부 제어가 가능합니다. 📝screenOptions (전역) 및 options (개별 화면)를 통해 드로어의 활성 색상, 라벨, 아이콘, 상태 바 숨김 등 다양한 스타일과 동작을 사용자 정의할 수 있습니다. 🎨DrawerNavigator를 기반으로 하므로, React Navigation 문서의 많은 속성과 기능이 적용됩니다. 📚drawerContent prop에 사용자 정의 컴포넌트를 전달하여 드로어 UI를 완전히 제어하고, 이미지나 추가 버튼 등 원하는 요소를 삽입할 수 있습니다. 🖼️DrawerContentScrollView와 DrawerItemList를 활용하여 기본 드로어 목록 기능을 유지하면서 커스텀 콘텐츠를 추가할 수 있습니다. 🧩useRouter와 useLocalSearchParams를 사용하여 API 데이터 등으로부터 동적으로 메뉴 아이템을 생성하고, 해당 아이템 클릭 시 동적 페이지로 라우팅할 수 있습니다. 🔄drawerItemStyle: { display: 'none' } 옵션을 Drawer.Screen에 적용하여 특정 화면을 드로어 메뉴에서 숨길 수 있습니다. 👻usePathname 훅을 사용하여 현재 활성화된 경로를 확인하고, 커스텀 드로어 아이템에 활성 상태 스타일을 동적으로 적용할 수 있습니다. ✨DrawerActions와 를 활용하여 코드 내에서 드로어를 열고, 닫고, 토글하는 등 프로그램적으로 제어할 수 있습니다. ⚙️navigation.dispatchDrawerToggleButton 컴포넌트를 사용할 수 있습니다. 🔘Recommanded Videos
2024. 12. 1.
2025. 1. 26.
2025. 9. 4.
2025. 3. 30.
2024. 11. 10.
2024. 10. 16.