ScrollViewの中でFlatListを使うとonEndReachedが無限に発行される

まじでどうにかならんのか

やりたいこと

下部までスクロールしたら新しいコンテンツをロードする

スクロールしていない場合は何もしない

なんでそんなことをしたいのか

スクロールバーの位置がずれる問題

https://gyazo.com/2cdc8f4c3b77bb25fe16a7c03e981c07

ScrollViewなしでFlatListのみを使うと、スクロールバーが紫のところに表示される

理想的には、赤のところにスクロールバーを表示したい

そのためにScrollViewでラップする

タブありでページ下部に無限リストがある時の問題

https://gyazo.com/d646596e78382b0621fba5c555dcbe41

FlatList上部のスクロールできるコンテンツは

FlatListのListHeaderComponentに指定すれば十分だが、

タブ系のライブラリ中でFlatListを使い、同様のことをしたい場合にはこれができない

タブのライブラリの制限のせいで、ListHeaderComponentに指定ができない

生じている問題

何もスクロールしていないのに、無限に新しいコンテンツがloadされる

スクロールしていないのにonEndReachedが発行されている

回避する方法

ScrollViewを使わずにi上の問題を解決する

つまり、ScrollVIew>FlatListがおかしくなる問題は諦める

ScrollVIew>FlatListがおかしくならないようにpropsを調合する

つまり、タイトルの意図

的を射ていない解決案ばかり

無限に発行させなければいいわけではない

通常の無限スクロールの挙動にはなってほしい

というコメントがissue上にあるが、これはドキュメントのどこかで記されているのか？

以下、参考にならなかったもののメモ

code:ts

<ScrollView

style={{ flex: 1 }}

contentContainerStyle={{ flex: 1 }}

<Flatlist .... />

</ScrollView>

確かに無限発行は止まったが、下部までスクロールしても新しいコンテンツがロードされない

これではFlatListを使っている意味がそもそもない

code:ts

this.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がいるかどうかで書き方が変わる

よむ