ListViewのonEndReachedは、反応ネイティブで、期待どおりに動作しません。

Question

これはコンポーネントのレンダリング用のコードです。

render() { 
    let loadMore; 
    let hasMore = this.props.end && this.props.photos.length < this.props.end; 

    if (hasMore) { 
    loadMore = (
     <View style={globalStyles.ContChild}> 
     <Button 
      onPress={() => this.loadMoreItems()} 
      containerStyle={globalStyles.bottomButton} 
      style={globalStyles.buttonText} 
      > 
      Load more 
     </Button> 
     </View> 
    ); 
    } 

    return (
    <View> 
     <ListView 
     dataSource={this.ds.cloneWithRows(this.props.photos)} 
     renderRow={this._renderPhoto} 
     contentContainerStyle={{ 
      flexDirection: 'row', 
      flexWrap: 'wrap', 
      marginLeft: 4, 
     }} 
     enableEmptySections={true} 
     initialListSize={12} 
     pageSize={12 * 3} 
     onEndReached={hasMore ? (() => this.loadMoreItems()) : null} 
     onEndReachedThreshold="32" 
     /> 
     {loadMore} 
    </View> 
); 
} 

底部が、32PX以下にスクロールリストビューは、追加のデータ・ロードを実行することを意図しています。

現在、データロードは、「その他の読み込み」というラベルのボタンを使用して動作します。これは、レンダリングメソッドのif条件で生成されるためです。このボタンは、ListViewのすぐ下のViewコンポーネント内に条件付きで追加されます。

現在のところ、ボタンをクリックすると、loadMore()ロジックが実行され、それに応じてより多くの画像が読み込まれます。ロードされたデータは写真のリストです（リストビューはフォトギャラリーです）。

onEndReachedハンドラを使用して、リストビューを下部のロジックまでスクロールするときに、ボタンを削除してを使用したかったとします。今のところ私のシステムには両方のロジックが共存していますが、しきい値を使用していても、onEndReachedロジックを使って、このプロジェクトで昨日始めてから問題がある、あるいは誤解しています：

今、onEndReachedロジックは、あたかも各レンダリングサイクルがonEndReachedがトリガすべきであると見なすかのように、各レンダリングサイクル（データが変更されるとIIRCの新しいレンダリングサイクルがトリガされ、各データがloadMoreコールで変化する）。ただし、リストビューはいずれの場合も最後までスクロールされません。それはまだ非常にスクロールしているトップです。

私の目的：画像全体を熱心に読み込むのではなく、スクロールページを使用して、つまりスクロールボトムに達すると、もっと多くの要素を自動的に読み込むようにします（[詳細をロード]ボタン - 私はそのボタンを削除するので、読み込み中でもスクロールすることなく）。

私の質問：このイベントに関して私は間違っていますが、どうすれば修正できますか？

Answer 1

あなたはこれを試すことができます：

<ListView 
    ref={(listView) => { _listView = listView; }} 
    dataSource={this.ds.cloneWithRows(this.props.photos)} 
    renderRow={this._renderPhoto} 
    contentContainerStyle={{ 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     marginLeft: 4, 
    }} 
    enableEmptySections={true} 
    initialListSize={12} 
    pageSize={12 * 3} 
    onEndReached={hasMore ? (() => this.loadMoreItems()) : null} 
    onEndReachedThreshold="32" 
    /> 

私は私のリストビューでREFを使用するために逃した、と同じ問題に直面しました。一度それらを追加すると、私のページネーションが正しく機能しています。