React-native
무한스크롤, 새로고침 함수 snippet 만들어봤다
파란배개
2022. 3. 25. 12:59
const getNextFetch = useCallback(() => {
const onEndReached = () => {
if (
(meta.pageNo - 1) * meta.pageSize + meta.numOfRows <
meta.totalCount
) {
myUboApis.getMyUbo(meta.pageNo + 1).then((res: dataInterface) => {
setMyUbo([...myUbo!, ...res.rows]);
setMeta(res.meta);
});
}
};
onEndReached();
}, [meta]);
const onRefresh = useCallback(async () => {
setRefreshing(true);
await myUboApis.getMyUbo(1).then((res: dataInterface) => {
setMyUbo(res.rows);
setMeta(res.meta);
});
setRefreshing(false);
}, [meta]);
useEffect(() => {
myUboApis.getMyUbo(meta.pageNo).then((res: dataInterface) => {
setMyUbo(res.rows);
setMeta(res.meta);
});
}, []);
getNextFetch는 flatList의 onEndReached 속성에, 두고 onEndReachedThreshold에는 onEndReached에 들어갈 콜백이 실행될 조건인 화면 및에서 어느정도 떨어진 부분에 도달하는가(숫자임. 맨 아래가 0)가 들어간다.
onRefresh는 onRefresh 속성에 넣고 refreshing 속성에는 onRefresh가 실행될 조건인 boolean이 들어간다.