Question

我在单个ListView组件中有3个ScrollView个组件，如下所示：

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

Header组件有一些常见内容，还有3个标签，触发显示相应的ListView

问题是任何ListView onEndReached={() => alert('load more 1')}永远不会运行警报，所以当我向下滚动并点击列表视图的末尾时，我永远不能加载更多。删除包裹ScrollView并运行提醒，但常见的Header不会滚动，因为我们刚刚删除了包裹ScrollView。标题需要使用listview滚动，这就是为什么我将需要在ScrollView中滚动的所有内容包装起来。

重要提示： 对于这种情况，我无法将ListView与renderHeader={this.header}一起使用。因为，即使Header会滚动，每次Header呈现时，它也会重新呈现每个ListView的公共ListView和3个标签，而不是一次。因此，对于每个Header，每次ListView重新投降都会为该应用删除它。

正在寻找此问题的解决方案，Header滚动列表视图，onEndReached为可见ListView触发。

Answer 1

我认为您必须通过更改每个listView中的dataSource来响应选择的标题元素而不是加载三个不同的ListView来解决这个问题。

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

你不想这样做的唯一原因是你想要保持三个子ListView中的滚动位置，但这不会有用，因为你总是要滚动到顶部无论如何都要改变你正在看的ListView。

然后在_renderHeader函数中，您将呈现一个选择器，根据所选的标题，使用不同的数据填充currentList。

Answer 2

在样式中，您可以将其设置为相对顶部：0和左：0。这样它就会保持静止。

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

可以在scrollview中使用的第二个选项是指定所有三个ListView的高度。

Answer 3

你可以使用ScrollView::onScroll，但它会有点hacky。您需要知道列表视图的大小。

仅使用ListView

也许最好的解决方案是使用ListView dataSource和onEndReached函数。

如果在触发ListView::onEndReached时更新数据集，我认为您可以向ListView添加更多元素。这样，您就不需要在ScrollViews中使用ListViews进行hacky事务。

React Native - ScrollView中ListView的分页？

3 个答案:

仅使用ListView