Question

这是我的组件渲染代码。

render() {
  let loadMore;
  let hasMore = this.props.end && this.props.photos.length < this.props.end;

  if (hasMore) {
    loadMore = (
      <View style={globalStyles.ContChild}>
        <Button
          onPress={() => this.loadMoreItems()}
          containerStyle={globalStyles.bottomButton}
          style={globalStyles.buttonText}
          >
          Load more
        </Button>
      </View>
    );
  }

  return (
    <View>
      <ListView
        dataSource={this.ds.cloneWithRows(this.props.photos)}
        renderRow={this._renderPhoto}
        contentContainerStyle={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          marginLeft: 4,
        }}
        enableEmptySections={true}
        initialListSize={12}
        pageSize={12 * 3}
        onEndReached={hasMore ? (() => this.loadMoreItems()) : null}
        onEndReachedThreshold="32"
      />
      {loadMore}
    </View>
  );
}

当ListView滚动到底部但是32px或更低时，它会执行额外的数据加载。

现在，数据加载通过标记为＆＃34;加载更多＆＃34;的按钮工作，因为它是在render方法的if条件中生成的。该按钮有条件地添加到View组件内，位于ListView的正下方。

目前，当您单击该按钮时，将执行loadMore()逻辑并相应地加载更多图片。加载的数据是图片列表（列表视图是照片库）。

我希望删除按钮，并在列表视图滚动到底部逻辑时使用，使用onEndReached处理程序。现在这两个逻辑在我的系统中共存，但是自从我昨天开始使用onEndReached逻辑以来，存在一个问题 - 或者是误解，即使使用了阈值：

现在onEndReached逻辑在每个渲染周期都急切执行（IIRC在数据发生变化时触发新的渲染周期，并且每次loadMore调用时数据都会发生变化），就好像每个渲染周期一样onEndReached应该触发。但是：在任何情况下，listview都不会滚动到最后。它仍处于滚动顶部。

我的目的：我不想急切地加载整个图片，但是以滚动分页的方式，即到达滚动底部时，自动加载更多元素（无需按下加载更多按钮 - 因为我将删除该按钮 - 并且没有急切的加载但滚动）。

我的问题：关于此事件，我做错了什么，我该如何解决？

Answer 1

你可以尝试这个：

<ListView 
    ref={(listView) => { _listView = listView; }}
    dataSource={this.ds.cloneWithRows(this.props.photos)}
    renderRow={this._renderPhoto}
    contentContainerStyle={{
      flexDirection: 'row',
      flexWrap: 'wrap',
      marginLeft: 4,
    }}
    enableEmptySections={true}
    initialListSize={12}
    pageSize={12 * 3}
    onEndReached={hasMore ? (() => this.loadMoreItems()) : null}
    onEndReachedThreshold="32"
  />

我错过了在ListView中使用ref，并且遇到了同样的问题。一旦我添加了这些，我的分页工作正常。

ListView的onEndReached，在本机中，未按预期工作

1 个答案: