리액트네이티브 리스트 React Native FlatList Infinite Scroll - #4 (무한스크롤)

FlatList에서 무한 스크롤은 onEndReachedThreshold와 onEndReached prop을 통해 구현 한다.

스크롤이 onEndReachedThreshold에 설정한 값에 도달하면 onEndReachd 메서드가 실행된다.

onEndReachedThreshold 는 스크롤 목록이 보이는 가장자리 길이 기준으로 목록의 아래쪽 가장자리가 콘텐츠이 끝에서부터 onEndReached 콜백을 트리거한다. 이 값이 0.5인경우 목록이 보이는 길이의 절반내에 있을때 onEndReached 메서드를 실행한다.

<FlatList
              data={this.state.data}
       
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0}
            />

 handleLoadMore = () => {
        this.setState(
          {
            page: this.state.page + 1
          },
          () => {
            this.makeRemoteRequest();
          }
        );
      };

onEndReachedThreshold 값이 클수록 스크롤영역이 끝에 닿기전에 데이터를 요청하게끔 되어있다.

원문출처