ScrollViewの中でFlatListを使うとonEndReachedが無限に発行される
まじでどうにかならんのか
やりたいこと
RN: ScrollViewの中でFlatListを使う
下部までスクロールしたら新しいコンテンツをロードする
スクロールしていない場合は何もしない
なんでそんなことをしたいのか
スクロールバーの位置がずれる問題
ScrollViewなしでFlatListのみを使うと、スクロールバーが紫のところに表示される
理想的には、赤のところにスクロールバーを表示したい
そのためにScrollViewでラップする
タブありでページ下部に無限リストがある時の問題
FlatList上部のスクロールできるコンテンツは
FlatListのListHeaderComponentに指定すれば十分だが、
タブ系のライブラリ中でFlatListを使い、同様のことをしたい場合にはこれができない
タブのライブラリの制限のせいで、ListHeaderComponentに指定ができない
なので、
ScrollView > タブライブリ > FlatList という入れ子にして解決する生じている問題
何もスクロールしていないのに、無限に新しいコンテンツがloadされる
スクロールしていないのにonEndReachedが発行されている
回避する方法
ScrollViewを使わずにi上の問題を解決する
つまり、ScrollVIew>FlatListがおかしくなる問題は諦める
ScrollVIew>FlatListがおかしくならないようにpropsを調合する
つまり、タイトルの意図
的を射ていない解決案ばかり
無限に発行させなければいいわけではない
通常の無限スクロールの挙動にはなってほしい
>FlatList cannot work right inside a ScrollView. ref
というコメントがissue上にあるが、これはドキュメントのどこかで記されているのか？
>以下、参考にならなかったもののメモ
ts<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ flex: 1 }}
>
<Flatlist .... />
</ScrollView> contentContainerStyle を付与するというもの確かに無限発行は止まったが、下部までスクロールしても新しいコンテンツがロードされない
これではFlatListを使っている意味がそもそもない
tsthis.state = {
enableScrollViewScroll: true,
};
onEnableScroll= (value: boolean) => {
this.setState({
enableScrollViewScroll: value,
});
};
render() {
return (
<View>
...
<ScrollView
scrollEnabled={this.state.enableScrollViewScroll}
>
...
<FlatList
...
onTouchStart={() => {
this.onEnableScroll( false );
}}
onMomentumScrollEnd={() => {
this.onEnableScroll( true );
}}
/>
...
</ScrollView>
...
</View>
);
}stateで次のコンテンツを読み込むかどうかを制御するやつ
これは保守性がかなりゴミ
FlatListを使う際に、親の方にScrollViewがいるかどうかで書き方が変わる
RN: ScrollViewの中でFlatListを使うと、FlatListのonEndReachedが無限に発行されるが、防ぐ方法はあるのか
まずFlastListの
scrollEnabled をfalseにするよむ