反応仮想化されたInfiniteLoaderの上下両方向

Question

上下左右に無限スクロールを行う方法。私はInfiniteLoaderとListを使用していますが、どちらも反応仮想化コンポーネントです。私は最初の日付 - 時間範囲のタイムスタンプのリストを持っています。そこからリストは両方向に無限になるはずです。現在、リストの一番下までスクロールダウンすると_loadMoreRows（）関数がトリガされます。しかし、方向を上にスクロールするとき、同じ機能を持つ_loadMoreRows（）をトリガーしたいと思います。

Answer 1

私は今すぐ働いています:)すべてうまくいきます。 <InfiniteLoader>のthreshold小道具は、Listの開始/終了前のインデックスの閾値数を定義して、データをプリフェッチするとき、つまりトリガー_loadMoreRows()を指定します。

this.state.itemsの最初と最後の項目は、最初のデータフェッチ後に対応するloadedRowsMapをundefinedに設定する必要があります。リストを表示する前に

const items = _getItems(); // fetch items 
    const rowCount = items.length; 
    const loadedRowsMap = []; 
    _.map(this.state.loadedRowsMap,(row,index)=>{ 
     const status = (index===0 || index===rowCount-1) ? undefined : STATUS_LOADED; 
     loadedRowsMap.push(status)}); 
    scrollToIndex = parseInt(rowCount/2,10); 
    this.setState({ 
     items, rowCount, loadedRowsMap, scrollToIndex, 
    }); 

、<List>成分のscrollToIndex支柱、すなわちrowCount/2、リストの中央に設定されるべきです。この数は、式

0 + threshold < scrollToIndex < rowCount - 1 - threshold. 

機能_isRowLoaded()がloadedRowsMap[index]をチェックします満足しなければなりません。 STATUS_LOADEDまたはSTATUS_LOADING（内部定数はInfiniteLoaderの内部で使用されます）に設定すると、_loadMoreRows()がトリガーされません。 undefinedに設定すると、_loadMoreRows()がトリガーされます。

この設定では、_loadMoreRows()は上下両方向のスクロール方向で動作します。