728x90
반응형
react native 로 UI를 그리다보면
해당 에러를 많이 만난다.
이는 스크롤의 축이 같은 Flatlist, scrollview, sectionlist 등의 컴포넌트안에
또 넣으면 발생하는 에러이다.
horizontal, vertical로 축이 다르면 문제가 되지 않는다.
지금 그리는 화면에서, Flatlist 의
ListHeaderComponent
를 사용하지않고
큰 scrollview 안에 같은 스크롤축이 있는 flatlist 를 넣어야 하는 경우가 발생했다.
결국, Flatlist 를 map 형식으로 view 를 찍으면서 큰 scrollview 하나만 사용하도록 변경하였는데,
페이징 처리가 문제였다.
const isCloseToBottom = ({
layoutMeasurement,
contentOffset,
contentSize,
}) => {
const paddingToBottom = 20;
return (
layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom
);
};
const pagenation = useCallback(() => {
console.log('pagenation :::::');
if (!last) {
setPage((prev) => ++prev);
}
}, [last, setPage]);
return (
<>
<ScrollView
ref={scrollRef}
style={{
flex: 1,
backgroundColor: wowBackgroundColor,
alignContent: 'center',
}}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
pagenation();
}
}}
scrollEventThrottle={400}
이런식으로, 스크롤을 할때, 남은 offset을 계산하여 pagenation 을 적용했다.
728x90
반응형