React Native FlatList с включенной инвертированной опцией

Question

У меня есть FlatList, как показано ниже:

  <FlatList
    inverted
    data={messages}
    keyExtractor={this._keyExtractor}
    renderItem={({ item }) => (
     <Text style={styles.item}>{item}</Text>
    )}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={30}
  />

Но здесь метод OnEndReached не вызывается, когда я достигаю вершины плоского списка. Пожалуйста, помогите

Answer 1

OnEndReachedThreshold должно быть числом от 0 до 1. Так как вы инвертируете свой плоский список, onEndReachedThreshold будет расстоянием, на которое пользователь находится от верхней части списка [в процентах]. Поэтому значение 0,5 вызовет функцию OnEndReached, когда пользователь прокрутит 50% просматриваемого списка.

Чтобы вызвать функцию на 50%, ваш код должен выглядеть примерно так:

<FlatList inverted data={messages} keyExtractor={this._keyExtractor} renderItem={({ item }) => ( <Text style={styles.item}>{item}</Text> )} onEndReached={this.handleLoadMore} onEndReachedThreshold={0.5} />

Answer 2

Мое решение здесь:

isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 1
return layoutMeasurement.height + contentOffset.y >=
  contentSize.height - paddingToBottom}

Answer 3

Все, что я мог понять, это использовать onScroll (будьте осторожны) здесь: https://snack.expo.io/@zvona/inverted-list-onbeginreached

Фактическая функция выглядит так:

checkIfBeginningReached = ({ nativeEvent }) => {
  const { layoutMeasurement, contentOffset } = nativeEvent;
  const currentPos = layoutMeasurement.height + contentOffset.y;
  const listLength = ITEM_HEIGHT * this.state.items.length;
  const reactThreshold = listLength - (ITEM_HEIGHT * THRESHOLD);

  if (currentPos >= reactThreshold) {
    this.fetchMoreItems(this.state.items.length);
  }
}

На этом мы выбираем необходимую информацию из nativeEvent (какой тип содержит все необходимое). Затем мы просто вычисляем текущую позицию в пикселях, длину содержимого всего списка в пикселях, а затем пороговую точку.

В целом, это конкретное решение требует двух вещей: 1) список имеет фиксированный и одинаковый размер элементов 2) список не является многоколоночным.

Все остальные функциональные возможности демо-версии просто имитируют / имитируют один вариант использования (получение еще 50 элементов с сервера с задержкой 500 мс). Но я улучшу свой ответ, если это возможно. Но это должно помочь вам начать.