Question

我遵循了本教程https://www.youtube.com/watch?v=rY0braBBlgw 当我向下滚动它发送请求然后它被卡在循环中，只是请求和请求。我认为这是listview中scrollview的一个问题。

Answer 1

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

<强> onEndReachedThreshold =＆GT;的 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

我不确定这是否正是您正在寻找的，但我在下面留下的代码允许您继续滚动浏览一组固定的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的{{1}}回调，但这似乎只是一次性发射。通过轮询onEndReached的滚动偏移量，我们可以根据需要多次触发自己的等效值。如果您指定FlatList道具，则可以改为使用getItemLayout。

Answer 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;
    }

是因为将setState设置为pageNum时，它将调用render（）函数，然后再次调用fetchMore。这样做是为了防止这种情况。另外，我设置：

refreshing: false

sendAPIRequest完成后。注意FlatList中的onEndReachedThreshold：

距离末尾多远（以列表的可见长度为单位）列表的底部边缘必须从内容的结尾开始 onEndReached回调。

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

使用flatlist反应原生无限滚动

3 个答案: