GitHubCreative Dev & WebGLidea-techcode
oblador/react-native-lightbox
oblador·@oblador·Feb 21, 2022
개요 React Native에서 이미지를 전체 화면 라이트박스 팝오버로 표시하는 컴포넌트다. 썸네일을 탭하면 부드러운 확대 애니메이션과 함께 전체 화면 이미지 뷰어로 전환된다.
핵심 내용 `<Lightbox>` 컴포넌트로 이미지를 감싸면 탭 시 전체 화면 확대 애니메이션이 적용된다. 핀치 줌, 스와이프로 닫기, 커스텀 헤더/푸터 렌더링을 지원한다. 이미지 외에도 어떤 뷰든 라이트박스로 표시할 수 있다.
기존 대비 차별점 별도 네비게이션 없이 현재 화면에서 팝오버 방식으로 이미지를 확대해 보여주어 맥락을 유지하면서 이미지를 자세히 볼 수 있는 UX를 제공한다.
활용 가능성 소셜 피드, 갤러리 앱, 제품 이미지 뷰어, 채팅 앱 내 이미지 프리뷰 등 React Native 앱에서 인라인 이미지 확대 기능이 필요한 곳에 활용할 수 있다.
참고 자료 - 원본
JavaScript⭐ 2,814
#react-native#lightbox#image-viewer#ui-component