React Native - ScrollView中ListView的分页？

Question

我ListView在单个ScrollView组件中有3 个组件,如下所示:

<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和3个选项卡每个ListView每次ListView渲染,而不是一次.因此Header,每次每次重新渲染都ListView不会为应用程序削减它.

寻找这个问题的解决方案,其中Header带有listviews 的滚动和onEndReached触发可见的滚动ListView.

Answer 1

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

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

您不想这样做的唯一原因是，如果您想在三个子 ListView 中保持滚动位置，但这没有用，因为您总是必须滚动到顶部才能更改您正在查看的 ListView无论如何。

然后在您的_renderHeader函数中，您将渲染一个选择器，currentList根据所选的标头填充不同的数据。