FlatList_ReactNative

속성

ItemSeparatorComponent

반복되는 컴포넌트들 사이에 구분선을 설정

renderItem

data속성에 배열 데이터를 설정하면 renderItem 함수를 통해 배열안의 각 원소 데이터를 가리키는 뷰를 보여줄 수 있다

<FlatList
        data={[]}
        renderItem={null}
        showsVerticalScrollIndicator={false}
        ListEmptyComponent={
          <><View>...</View></>}
 />      

Scroll event

onEndReached , onEndReachedThreshold

스크롤이 바닥에 닿았을때 사용할 수 있다
이렇게 하면 콘텐츠의 85%까지 스크롤했을때 onEndReached 함수가 호출된다
스크롤로 더 많은 정보를 불러오는 무한 스크롤링을 구현할 때 이 Props를 사용하면 유용하다
하지만 이 속성은 스크롤을 내렸을 때는 감지가 가능하지만 스크롤을 올릴때는 감지되지 않음

<FlatList ... 
  onEndReached={(distanceFormEnd) => {
    console.log("바닥!");
  }}
  onEndReachedThreshold={0.85} />

onScroll

스크롤을 올릴때 감지된다
전체 크기와 스크롤의 위치를 알아낼 수 있다

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('바닥과 멀어졌어요.');
  }
};

참고블로그