프론트엔드 개발자의 개발 놀이터

화면에서 햄버거 메뉴 버튼을 누를 시 좌측 또는 우측 사이드바가 나오는 화면을 만들고 싶을 땐 Drawer Navigator를 사용하면 됩니다. 1. 설치 yarn add @react-navigation/drawer 2. 등록 여기서 기존의 Bottom Navigator를 등록하는 방식에서 약간의 차이점이 발생합니다. 기존엔 안에 를 등록하는 방식이였다면, 가 등록되기 전에 가 먼저 등록되고 그 다음 를 등록하는 방식으로 변경이 되어야 합니다. before : NavigationContainer > Bottom.Navigator > Bottom.Screen after : NavigationContainer > Drawer.Navigator > Drawer.Screen > Bottom.Navigator >..

일반적으로 Bottom tabs Navigator에 등록된 Screen을 누르면 component에 등록된 첫번째 스택이 보여지게 됩니다. 하지만 메모 앱과 같이 Screen을 누르면 다음 스택(메모 작성 화면)으로 이동하는 기능을 추가하고 싶을 때는 Screen에 listeners를 등록해주고 navigation.navigate() 함수를 사용하여 이동되도록 하면 됩니다. flow : 앱 실행 -> Bottom tabs Navigator의 첫번째 Screen Load -> 첫번째 Screen의 component에 등록된 첫번째 Stack이 화면에 보여짐 -> tabBarIcon을 누르면 listeners에서 다음 스택으로 이동하는 함수 호출 // BottomNavigation.tsx ({ tabPres..