reafct-native 바운스 효과있는 스크롤뷰 구현했습니다.
이미 화면 제일 위로 스크롤된상태에서 추가로 더 위로 스크롤하려고하면
(1) 스크롤뷰와 회면 최상단 사이에 여백이 늘어났다가
(2) 그 여백이 다시 바운스되어 줄어드는
저 애니메이션을 너무 구현하고싶었어요.
1. react-native에서 제공하는 API만으로,
2. 안드로이드폰에서도 돌아가는 형태로요.
오늘 정말 못해도 6시간은 넘게 찾아봤어요.
구글링, 유튜브, 깃허브, npm사이트 등등, 예시화면 보면 잘돌아가는거같은데
예제코드 그대~로 복사해서 (안드로이드폰에) 돌려보면 안되더라구요.
StackOverflow에서도 react-native로
bounce효과있는 스크롤뷰 (IOS처럼) 안드로이드에서는 어케하냐고
질문올라왔는데 답변이 안달린걸보면... 원래 안드로이드에서 기본적으로 안되는걸지도...
(혹시 react-native로만 구현한 패키지 있으면 꼭 알려주세요. 원본소스 분석 하고싶습니다.)
어쩄든 몇가지 제한사항 있긴해도 구현했습니다. 되긴되네요.
기본 (제일 위로 스크롤된 상태)
이미 제일위로 스크롤된상태에서 더 위로 스크롤하려고 하면 여백이 늘어났다가
제스처놓으면 다시 바운스되어 돌아갑니다.
이건 그 반대 경우에요.
그외 사소하게 제가 의도했던것을 온전히 담아냈습니다.
제한사항은,
1. 스크롤하다가 손가락을 폰에서 떼는 즉시 스크롤멈춥니다.
(원래 제스처 빠르게하면 손가락 떼도 스크롤이 계속 진행됩니다)
2. 스크롤화면이 화면을 꽉채운 경우에만 됩니다.
아직 뭐 헤더 푸터 위아래로 껴있고 이런건 테스트안해봤어요.
일단 react-native 애니메이션 연습하는데 많이 도움도 됬고 재밌었던 경험이었습니다.
소스코드는 여기서 확인하실 수 있습니다.
