ListView 的 onEndReached 在视图中不起作用答案

【问题标题】：ListView's onEndReached not working when inside a ViewListView 的 onEndReached 在视图中不起作用
【发布时间】：2016-04-12 16:49:00
【问题描述】：

事情就是这样。我想呈现一个在 onEndReached 时更新数据的列表视图。

在更新数据时，我想在列表下方呈现一个“正在加载”文本（不删除列表）。像这样：

render() {
  var {isFetching} = this.props.query
  var loading
  if(isFetching){
    loading = this.renderLoading()
  }
  return (
      <ListView
        dataSource={this.dataSource}
        renderRow={this.renderItem}
        onEndReached={this.props.fetchNextPage}
        onEndReachedThreshold={10}
        style={styles.listView} />
      {loading}
  )
}
renderLoading () {
  return (
    <View style={styles.loading}>
      <ActivityIndicatorIOS
        size='large'/>
      <Text>
        Loading books...
      </Text>
    </View>
  )
}

但很快我就意识到渲染函数必须返回单个元素。所以我尝试了这个：

return (
    <View>
      <ListView
        dataSource={this.dataSource}
        renderRow={this.renderItem}
        onEndReached={this.props.fetchNextPage}
        onEndReachedThreshold={10}
        style={styles.listView}/>
      {loading}
    </View>  
  )

但是 onEndReached 在安装后一次又一次地触发。甚至在我触摸屏幕之前。

如何在保持“无限滚动”行为的同时实现加载视图？

【问题讨论】：

标签： react-native react-jsx

【解决方案1】：

我终于使用了一种解决方法。我将加载视图呈现为 listView 的页脚。

【讨论】：

onEndReached 仍然一次又一次地触发
也许我不清楚。移除封闭的并在 renderFooter() 方法中渲染任何你想要的东西

【解决方案2】：

你可以尝试给 ListView 一个高度(eg:height:300)

【讨论】：

【解决方案3】：

您不需要将其呈现为 listView 页脚。尝试给出环绕视图样式：{flex: 1}:

return (
    <View style={{flex: 1}}>
      <ListView
        dataSource={this.dataSource}
        renderRow={this.renderItem}
        onEndReached={this.props.fetchNextPage}
        onEndReachedThreshold={10}
        style={styles.listView}/>
      {loading}
    </View>  
  )

【讨论】：

【解决方案4】：

您的列表一次又一次呈现的可能原因之一可能是此处的 onEndReachedThreshold={10} 值。

对于大于或等于 1 的值，只要调用 render 就会调用 onEndReached 中的方法。

设置一个值，比如 0.5，这意味着当滚动当前列表的一半时将调用 onEndReached 方法。

【讨论】：