React Nativeで無限スクロールのタイムラインを作成したんだけど、対象のコンテンツがデバイスの高さ以上になるコンテンツ数を持っていないときに、発生する必要のない無限スクロールイベントが無限で発生する事象が起きたので対処法を実装した。
まずはデバイスの高さを取得する。
const screenHeight = Dimensions.get("window").height;
次にFlatList
ののコンテンツサイズ変更時にsetContentHeight
を利用し、リストの高さを更新する
const [contentHeight, setContentHeight] = useState(0);
...(中略)
onContentSizeChange={(width, height) => {
setContentHeight(height);
}}
で、リストの高さがデバイスの高さより大きければ、スクロール可能(onEndReachedが発火してもいい)ので
const hasMoreContent = contentHeight > screenHeight;
...(中略)
onEndReached={hasMoreContent ? onEndReached : null}
}}
という風に実装できる。