리액트 네이티브 flatlist 관련 질문 받아주실 분 있으실까요?
제가 리액트 네이티브로, 위아래로 슬라이드 하면 한 달씩 넘어가는 캘린더를 만들고 있습니다.
그래서 전체를 FlatList로 만들고 스크롤 시 y인덱스를 받아와서 한 달씩 랜더하는 식으로 코드를 구현하였습니다.
const handlePageChange = (newPage: number) => {
if(newPage !=0) {
const newDate = new Date(currentDate);
newDate.setMonth(newDate.getMonth() + newPage);
setCurrentDate(newDate);
}
};
return (
<FlatList
data={[...Array(1).keys()]}
keyExtractor={(item) => item.toString()}
renderItem={({ item }) => (
<CalendarMonth currentDate={{ currentDate }} ClickedDate={{ ClickedDate }} setClickedDate={setClickedDate} />
)}
horizontal={false}
pagingEnabled= {true}
showsVerticalScrollIndicator={false}
scrollEventThrottle={100000}
onScrollEndDrag={(event) => {
const offset = event.nativeEvent.contentOffset.y;
const direction = offset === 0 ? 0 : offset > 0 ? 1 : -1;
handlePageChange(direction);
}}
/>
);
이런 식으로 코드를 구현하였는데 위로 잡아 올렸을 때 빈칸이 보이는데 저는 스크롤 시 모션은 보이지 않고 바로 다음 달력으로 넘어갔으면 합니다.
혹시 스크롤 시에 달력이 움직이지 않고 바로 넘어갈 수 있는 방법이 있을까요?