Question

这是事情。我想渲染一个listview，在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一旦安装就一次又一次地发射。甚至在我触摸屏幕之前。

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

Answer 1

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

Answer 2

你可以尝试给ListView一个高度（例如：height：300）

Answer 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>  
  )

Answer 4

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

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

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

ListView的onEndReached在View中不起作用

4 个答案: