최근에 직장을 옮겼고 첫 번째 작업 중 하나는 React Native에서 하단 시트를 만드는 것이었습니다.
네이티브 Android 개발 배경에서 왔기 때문에 네이티브에서 하단 시트를 만드는 것만큼 벅찰 것이라고 생각했습니다. 하지만 내가 너무 틀렸어! 나는 너무 매료되어 React Native에서 하단 시트를 만드는 방법에 대한 간단한 자습서를 작성하기로 결정했습니다.
하단 시트는 화면 하단에서 위로 미끄러지는 유용한 구성 요소이며 종종 다른 옵션을 포함합니다. 현대적인 디자인에서 매우 일반적이며 Uber, Zomato 등과 같은 앱에서 사용됩니다.
최종 결과는 다음과 같습니다.
이제 React Native에서 하단 시트를 만드는 방법을 살펴보겠습니다.
시작하기
먼저 React Native에서 새 프로젝트를 만듭니다. 나는 이것을 위해 expo-cli를 사용하고 있습니다. expo-cli를 모르거나 React Native를 막 시작했다면 이 링크를 확인하세요.
내 프로젝트의 이름을 BottomSheetDemo로 지정했습니다.
다음으로 react-native-modalbox를 설치해야 합니다. 이것은 애니메이션, 위치, 배경 등과 같은 많은 내장 기능을 제공합니다.
$ 엑스포 설치 react-native-modalbox@1.7.1
참고:버전 1.7.1을 설치하는 것을 잊지 마십시오. 최신 버전에는 backgroundPressToClose가 작동하지 않는 버그가 있습니다.
모달 만들기
이제 모달을 만들 차례입니다. 처음에 제공된 코드를 제거하고 App.js 파일에 다음을 추가합니다.
이것은 하단 시트/모달의 맨 뼈입니다. 모달의 중앙에 있는 텍스트로 표시하겠습니다.
상호작용 추가
버튼을 눌렀을 때 표시될 하단 시트가 필요합니다. 상호작용을 추가해 보겠습니다.
화면 중앙에 간단한 버튼을 추가하겠습니다.
이 버튼을 클릭하면 하단 시트를 표시/숨겨야 합니다. 이를 위해 useState React 후크를 사용하여 상태를 유지합니다.
모달에는 하단 시트를 표시/숨기기 위해 토글할 수 있는 "isOpen"이라는 소품이 있습니다. 이를 표시하기 위해 modalVisible을 false로 또는 그 반대로 설정하기만 하면 됩니다.
그러나 먼저 모달이 약간 지저분해지기 시작하므로 나머지 코드에서 모달을 분리해 보겠습니다. 모달을 반환할 별도의 함수를 만들겠습니다.
이제 코드가 훨씬 깔끔해 보입니다. 그러나 하단 시트는 여전히 하단 시트와 정확히 같지 않습니다. 스타일을 추가해야 합니다.
스타일링을 추가해 봅시다!
스타일시트를 만들고 여기에 다음 스타일을 추가합니다.
최종 코드는 다음과 같습니다.
마침내 React Native에서 하단 시트를 만들었습니다. 기본 Android보다 훨씬 간단하고 만들기 쉽습니다.
iOS에 대해 한 번도 시도해 본 적이 없기 때문에 댓글을 달 수 없습니다.
따라서 iOS 개발자이거나 iOS에서 하단 시트를 만든 경험이 있다면 어떤 경험이었는지 알려주세요.
사람들이 최신 기술, 특히 Android 개발, RxJava, Kotlin, Flutter 및 일반적인 모바일 개발에 대한 학습 내용을 공유하는 모바일 개발자를 위한 AndroidVille SLACK 작업 공간에 참여하세요.
작업 공간에 참여하려면 이 링크를 클릭하십시오. 완전 무료입니다.
읽은 내용이 마음에 드십니까? 이 게시물을 Facebook, Whatsapp 및 에 공유하는 것을 잊지 마십시오. 링크드인 .
LinkedIn, Quora, Twitter 및 Instagram에서 저를 팔로우할 수 있습니다. 여기에서 제가 모바일 개발, 특히 Android 및 Flutter와 관련된 질문에 답할 수 있습니다.