使用flatlist反应原生无限滚动

Question

我按照本教程https://www.youtube.com/watch?v=rY0braBBlgw 当我向下滚动它发送请求然后它陷入循环并且只是请求和请求.我认为这是listview中的scrollview的一个问题.

Answer 1

我不确定你是否能够解决这个问题,但我遇到了同样的问题而且我正在添加适合我的方法.

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}

    />

我希望这可以帮助别人.

Answer 2

这对我有用：

     <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 完成后。注意FlatList中的onEndReachedThreshold：

列表的下边缘距离内容的末尾必须距离末尾多远（以列表的可见长度为单位）才能触发 onEndReached 回调。

在我的示例中 (0.1) 意味着：当您从底部到达 10% 的项目时，将调用 fetchMore 回调。在我的示例中，列表中有 10 个项目，因此当最后一个项目可见时，将调用 fetchMore。