리액트네이티브 parallax 스크롤 구현하기

parallax-scroll 스크롤링 크기를 엘리먼트들에 다르게 주는 기법을 사용한 디자인 스크롤을 하면서 헤더 크기가 줄어들게 할려고 연구하다가 알게된 기법! 대략적인 기능 설명 1. Animate.ScrollView에서 스크롤을 할때마다 맵핑된 scrollY변수에 값이 입력됨 2. scrollY변수에 값이 바뀌면 Animated.View(헤더)의 높이가 변한다 const scrollY = useRef(new Animated.Value(0)).current; ... <View style={{backgroundColor: 'white'}}> <Animated.ScrollView ref={scrollViewRef} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: scrollY}}}], { u...

원문링크 : 리액트네이티브 parallax 스크롤 구현하기