반복되는 컴포넌트들 사이에 구분선을 설정
data속성에 배열 데이터를 설정하면 renderItem 함수를 통해 배열안의 각 원소 데이터를 가리키는 뷰를 보여줄 수 있다
<FlatList
data={[]}
renderItem={null}
showsVerticalScrollIndicator={false}
ListEmptyComponent={
<><View>...</View></>}
/>
스크롤이 바닥에 닿았을때 사용할 수 있다
이렇게 하면 콘텐츠의 85%까지 스크롤했을때 onEndReached 함수가 호출된다
스크롤로 더 많은 정보를 불러오는 무한 스크롤링을 구현할 때 이 Props를 사용하면 유용하다
하지만 이 속성은 스크롤을 내렸을 때는 감지가 가능하지만 스크롤을 올릴때는 감지되지 않음
<FlatList ...
onEndReached={(distanceFormEnd) => {
console.log("바닥!");
}}
onEndReachedThreshold={0.85} />
스크롤을 올릴때 감지된다
전체 크기와 스크롤의 위치를 알아낼 수 있다
const onScroll = (e) => {
const {contentSize, layoutMeasurement, contentOffset} = e.nativeEvent;
console.log({contentSize, layoutMeasurement, contentOffset});
};
<FlatList ... onScroll={onScroll}/>
contentSize.height
는 FlatList 내부의 전체 크기를 나타내고, layoutMeasurement.height
는 화면에 나타난 FlatList의 실제 크기를 나타낸다contentOffset.y
는 스크롤할 때마다 늘어나는 값, 스크롤이 맨 위에 있을 때는 0이고, 스크롤이 맨 아래에 있을 때는 contentSize.height - layoutMeasurement.height
를 계산한 값이다contentSize.height - layoutMeasurement.height - contentOffset.y
가 0에 가까워 진다면 FlatList의 스크롤이 바닥에 가까워지는 것이라고 이해하면 쉬움const onScroll = (e) => {
const {contentSize, layoutMeasurement, contentOffset} = e.nativeEvent;
const distanceFromBottom = contentSize.height - layoutMeasurement.height - contentOffset.y;
if (distanceFromBottom < 72) {
console.log('바닥이 가까워요.');
} else {
console.log('바닥과 멀어졌어요.');
}
};