FlatLIstの無限スクロールで早送りするユーザースクロールがReact Native

Question

現在、私は論理的な問題に直面しています。私はFacebookがそうするように、ユーザーがより多くのニュースを見たいと思うようにスクロールダウンし続ける必要がある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のために任意の新しいスクロールエリアをブロックするようにBooleanを持っているでしょう。物事が時には「速く」になるときに、私はこの論理を使います。

これは、JavaScriptでそれを行うことができますいくつかの方法の一つです：あなたはまた、単に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);のようになります。