react-native-infinite-scroll-viewの使い方

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）