Значение в моем примере (0.1) означает: когда вы достигаете 10% элементов снизу, вызывается обратный вызов fetchMore. В моем примере у меня есть 10 элементов в списке, поэтому, когда последний элемент виден, вызывается fetchMore.

довал этому урокуhttps://www.youtube.com/watch?v=rY0braBBlgw Когда я прокручиваю вниз, он отправляет запрос, затем застревает в цикле и просто запрашивает и просит. Я думаю, что это проблема прокрутки в списке.

 Ahmed Ali26 сент. 2017 г., 10:08
можешь показать нам свой код
 Mark Amery27 дек. 2017 г., 17:58
Я голосую, чтобы закрыть это, потому что это вопрос отладки, который не включает никакого кода в сам вопрос. Просить нас отладить код, размещенный вне сайта, здесь не принято; просит нас отладить код изYouTube видео конечно нет. Хотя это не идеально подходит для этого случая, смотритеmeta.stackoverflow.com/q/254428/1709587 для некоторого обсуждения почему.

Ответы на вопрос(3)

Это работает для меня:

     <FlatList
          data={this.state.storesList}
          renderItem={({ item, index }) => renderItem(item, index)}
          keyExtractor={(item, index) => item.id.toString()}
          onEndReached={this.fetchMore}
          onEndReachedThreshold={0.1}
          ListFooterComponent={this.renderFooter}
          refreshing={this.state.refreshing}
        />


renderFooter = () => {
    if (this.state.refreshing) {
      return <ActivityIndicator size="large" />;
    } else {
      return null;
    }
  };


  fetchMore = () => {
    if (this.state.refreshing){
      return null;
    }
    this.setState(
      (prevState) => {
        return { refreshing: true, pageNum: prevState.pageNum + 1 };
      },
      () => {
        this.sendAPIRequest(null , true);
      }
    );
  };

Причина, по которой я использовал следующее в функции fetchMore:

if (this.state.refreshing){
      return null;
    }

Это потому, что когда вы устанавливаетеState для pageNum, он вызывает функцию render (), а затем вызывается fetchMore. Это написано, чтобы предотвратить это. Кроме того, я установил:

refreshing: false

после отправки sendAPIRequest. Обратите внимание на onEndReachedThreshold в FlatList:

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

Значение в моем примере (0.1) означает: когда вы достигаете 10% элементов снизу, вызывается обратный вызов fetchMore. В моем примере у меня есть 10 элементов в списке, поэтому, когда последний элемент виден, вызывается fetchMore.

что это именно то, что вы ищете, но код, который я оставил ниже, позволяет вам продолжать прокручивать фиксированный наборdata реквизит. Когда вы достигнете последнего индекса, он в основном обернется к началу. Я добился этого, добавив копию первого элемента поставляемогоdata до концаFlatList; когда пользователь прокручивает это в поле зрения, мы можем безопасно сбросить смещение прокрутки.

import React, { Component } from 'react';
import { FlatList } from 'react-native';

export default class InfiniteFlatList extends Component {

  constructor(props) {
    super(props);
    this.state = {
    };
    this._flatList = null;
  }

  getWrappableData = (data) => {
    return [...data, data[0]];
  }

  render = () => (
    <FlatList
      { ...this.props }
      ref={ (el) => this._flatList = el }
      onLayout={ ({nativeEvent}) => {
        const {width, height} = nativeEvent.layout;
        this.setState({
          width, height
        });
      } }
      onScroll={ ({ nativeEvent }) => {
        const { x } = nativeEvent.contentOffset;
        if(x === (this.props.data.length * this.state.width)) {
          this._flatList.scrollToOffset({x: 0, animated: false});
        }
      } }
      data={ this.getWrappableData(this.props.data) }
      pagingEnabled={true}
    />
  )

};

InfiniteFlatList.defaultProps = { };
InfiniteFlatList.propTypes = { };

Это предполагает, что вы хотите прокрутить горизонтально.

Это, вероятно, не идеально; там, вероятно, есть лучшая техника, которая используетFlatList«sonEndReached обратный вызов, однако это, казалось, срабатывает только один раз. Опросом смещения прокруткиFlatListмы можем запустить собственный эквивалент столько раз, сколько необходимо. Если вы укажетеgetItemLayout проп, вы сможете использоватьscrollToIndex({index, animated?}) вместо.

что вы смогли решить эту проблему, но у меня возникла та же проблема, и я добавляю то, что мне помогло.

onEndReachedThreshold=>onEndThreshold

<FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <ListItem
          roundAvatar
          title={
            <Text style={{textAlign: 'left'}}> {item.name.first} {item.name.last}</Text>
          }
          subtitle={
              <Text style={{textAlign: 'left'}}>{item.email}</Text>
          }
          avatar={{ uri: item.picture.thumbnail }}
          containerStyle={{ borderBottomWidth: 0 }}
        />
      )}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      keyExtractor={item => item.email}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndThreshold={0}

    />

Я надеюсь, что это поможет кому-то.

 Sagaryal21 сент. 2018 г., 07:39
Нет, я сделал то же самое, но onEndReached выполняется бесконечно. Почему это?

Ваш ответ на вопрос