react-native-infinite-scroll-view
https://github.com/exponentjs/react-native-infinite-scroll-view
ReactNativeでInfinite Scroll (いわゆる無限スクロール) を実現できるこの素敵なコンポーネントですが、README見ただけでは上手く動かなかったので補足。
結論から先に言うと
READMEに載っていないdistanceToLoadMore
とonLoadMoreAsync
というプロパティが必要。
例
<ListView
dataSource={...}
renderRow={...}
renderScrollComponent={(props) => <InfiniteScrollView {...props} />}
canLoadMore={canLoadMore}
isLoadingMore={isLoadingMore}
distanceToLoadMore={10}
onLoadMoreAsync={()=>{
dispatch(loadMore())
}}
/>
ハマりどころ
distanceToLoadMore
が未設定だと、デフォルト値として1500が設定され、少ししかスクロールしていないのに続きが読み込まれてしまう。
プロパティ
-
dataSource
= リストデータ -
renderRow
= Viewコンポーネント -
renderScrollComponent
= おまじない(このまま記述) -
canLoadMore
= まだ続きのデータがあるかどうか(boolean) -
isLoadingMore
= 続きのデータを読込中かどうか(boolean) -
distanceToLoadMore
= 最下部からのどれぐらいの距離で続きのデータを読み込むか(number) -
onLoadMoreAsync
= 続きのデータを読み込むActionをここでdispatchする(function)