что на самом деле означает onEndReachedThreshold в react-native

из документации:

количество onEndReachedThreshold

порог в пикселях (виртуальный, а не физический) для вызова onEndReached. поэтому я просто хотел знать, что это значит, порог сверху или порог снизу.

сверху? - если я задаю значение onEndReachedThreshold ={10}, мой onEndReached вызывается, как только я прокрутил до 10 пикселей, или что-то еще.

от дно? - если я установил значение onEndReachedThreshold ={ListView height -10}, будет ли мой onEndReached вызываться, как только я прокрутил до 10 пикселей или что-то еще.

10
android listview react-native

4 ответов

на документация всегда лучший способ пойти:

функция onEndReached
Вызывается, когда все строки были отображены и список был прокручен в пределах onEndReachedThreshold в самом низу. Предоставляется событие native scroll.

количество onEndReachedThreshold
порог в пикселях (виртуальный, а не физический) для вызова onEndReached.

Так как я это вижу: если вы это сделаете onEndReachedThreshold ={10} Он называет onEndReached Если вы прокрутили до 10 пикселей снизу

4

при использовании FlatList вместо ListView обратите внимание, что единицы параметра изменились.

на ListView Это было в пикселях снизу, но согласно документы для FlatList, это вместо единиц длины снизу в элементах списка.

как далеко от конца (в единицах видимой длины списка) нижний край списка должен быть от конца содержимого, чтобы вызвать обратный вызов onEndReached. Таким образом значение 0.5 вызовет onEndReached, когда конец содержимого находится в пределах половины видимой длины списка.

таким образом, если вы хотите обновить список, когда пользователь находится на полпути вниз по текущему набору данных, установите значение 0.5

12

Я думаю, что проблема произошла из-за многих представлений и прокрутки, поэтому я использовал в качестве компонента warper для Listview, у него была та же проблема, я просто меняю его для просмотра со стилем: {flex: 1} и он отлично работает

return (
    <View style={{flex: 1}}>
      <ListView
        dataSource={this.dataSource}
        renderRow={this._renderRow.bind(this)}
        onEndReached={this._paginateDataSource.bind(this)}
        style={styles.listView}/>
      {loading}
    </View>  
  )
0

вот как это работает в зависимости от исходный код: 

const {contentLength, visibleLength, offset} = this._scrollMetrics;
const distanceFromEnd = contentLength - visibleLength - offset;
if (
  onEndReached &&
  this.state.last === getItemCount(data) - 1 &&
  distanceFromEnd < onEndReachedThreshold * visibleLength &&
  (this._hasDataChangedSinceEndReached ||
    this._scrollMetrics.contentLength !== this._sentEndForContentLength)
) {
  // Only call onEndReached once for a given dataset + content length.
  this._hasDataChangedSinceEndReached = false;
  this._sentEndForContentLength = this._scrollMetrics.contentLength;
  onEndReached({distanceFromEnd});
}

Итак, прежде всего, это chek для onendreached обратного вызова, если он существует, после этого он проверяет, отображается ли последний элемент данных(не обязательно видимый), и только тогда он проверяет, достаточно ли вы прокручиваете до нижней части списка.

visibleLength вот высота элемента списка (если горизонталь не задана), а contentLength-высота контейнера элемента списка умножьте количество элементов в данных. Как видите onEndReachedThreshold это число реверса " видимых экранов "(i.e высоты вашего элемента списка) вы должны прокручивать, пока ваш onendreached обратный вызов не загорится-больше onEndReachedThreshold менее, вы должны прокрутить. При значении onEndReachedThreshold = 0.5 ваш обратный вызов будет срабатывать почти в "конце" списка. Но помните, что это не будет до последнего элемента отображается, независимо от того, какое значение вы будете набор.

0