목록2024/09/15 (1)

My Boundary As Much As I Experienced

RN) Scroll에 따라 숨겨지고 노출되는 모바일 헤더 만들기 (with react-native-reanimated)

구현해야되는 기능:일기주제 페이지에서 스크롤을 내릴 때 배너를 숨겨야한다.그러나 (한참을 내렸어도) 살짝만 올리면 배너가 다시 노출되어야한다.    구현 아이디어:스크롤 애니메이션을 탐지하여스크롤을 아래로 내릴 때 헤더 높이만큼 배너를 올려주고,올릴 때 헤더 높이만큼 배너 높이만큼 배너를 내려준다. reanimated를 쓰는 이유? 나는 이 기능을 구현하기 위해 리액트네이티브에서 주로 쓰이는 애니메이션 라이브러리인ReactNative-reanimated를 사용하였다. RN에서 기본적으로 제공하는 animated API도 있긴하나이는 자바스크립트 모듈로 네이티브 모듈을 조작하는거기 때문에성능이 좋지않다고 한다. 앱에서 처리하고 있는 비즈니스 로직도 많은데애니메이션까지 자바스크립트 모듈로 처리해버리면앱의 메..
FrontEnd/React Native 2024. 9. 15. 11:27
이전 Prev 1 Next 다음