사용자가 빠르게 스크롤하여 FlatLIst에서 무한 스크롤을 원할 경우

Question

현재 논리 문제가 있습니다. 페이스 북처럼 페이스 북 에서처럼 더 많은 뉴스를보고 싶을 때 사용자가 계속 스크롤해야하는 FlatList를 만들고 싶습니다. 그래서 기본적으로 지금까지 사용자가 빠르게 스크롤하면 무한 루프에 빠지기 때문에 버그가 발생합니다. 이동을 계속하고 페치를 유지하기 때문입니다.

<FlatList 
     ref= {(list) => this.feed = list} 
     data={data} 
     onEndReached={this.onEndReached} 
     refreshControl={ 
     <RefreshControl 
      refreshing={refreshing} 
      onRefresh={this.onRefresh} 
     /> 
     } 
    /> 

    async onEndReached() { 
    if (this.state.loading) return; 
    this.setState({ loading: true }); 
    await fetchFeed(from); 
    this.setState({ loading: false }); 

    this.feed.scrollToIndex({ viewPosition: 0.4 }); 
    } 

내 문제는 사용자가 눌러 중지해도 스크롤이 여전히 추락이다 :

이 내 코드입니다. onMomentum 속성을 사용하려고했지만 여전히 문제가있었습니다.

Answer 1

나는 react-native을 사용하지 않았지만, 은 새로운 스크롤 영역을 차단하기 위해 500 ms을 차단했습니다. 상황이 "빠름"으로 바뀔 때가이 논리를 사용합니다.

이것은 당신이 자바 스크립트에서 할 수있는 몇 가지 방법 중 하나입니다 : 당신은 또한 단지 이벤트 리스너 및 X-초 후에 다시 연결을 제거 할 수

var button  = document.getElementById("button"); 
 
var timeout  = undefined, 
 
    timeout2, 
 
    continue_0 = false; 
 

 
function go() { 
 

 
    if (continue_0) { 
 
     // Your code when everything is OK here 
 
     button.innerHTML = "ON"; 
 
     
 
     clearTimeout(timeout2); 
 
     timeout2 = setTimeout(() => { // just an example timeout 
 
      
 
      button.innerHTML = "OFF"; 
 
     }, 500); 
 
     
 
     continue_0 = false; 
 
    } else { 
 

 
     if (timeout === undefined) { 
 

 
      button.innerHTML = "OFF"; 
 
      clearTimeout(timeout2); 
 
      timeout = setTimeout(() => { 
 
       
 
       timeout  = undefined; 
 
       continue_0 = true; 
 
       button.innerHTML = "You can turn ON now"; 
 

 
      }, 1000); 
 
     } 
 
    } 
 
} 
 
button.addEventListener("click", go);

<h3>Wait 1 sec. to turn "On" - After Click</h3> 
 
<button id="button" style="padding: 30px;">OFF</button>

; 예 : document.body.removeEventListener("click", go);.