反应 – 原生 – 在ScrollView中ListViews的分页？

我在一个ScrollView组件中有3个ListView组件,如下所示：

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

标题组件具有一些常见内容,并且还有3个选项卡,它们触发显示相应的ListView

问题是任何ListView与onEndReached = {()=> alert(‘load more 1’)}永远不会运行警报,所以我不能加载更多,因为我向下滚动并点击列表视图的结尾.删除包装ScrollView和警报运行,但公共头文件不滚动,因为我们刚刚删除包装ScrollView.标题需要使用列表视图滚动,这就是为什么我将所有需要滚动到ScrollView中的内容.

重要的提示：
我不能真正使用ListView与renderHeader = {this.header},对于这种情况.因为即使Header会滚动,每次ListView呈现时,它将重新渲染公共头和每个ListView的3个选项卡,而不是一次.所以每次对ListView而言,每次新的Header rerender都不会将其剪切掉.

寻找一个解决这个问题的方法,标题滚动列表浏览和onEndReached触发可见的ListView.

我想你将不得不通过更改每个listView中的dataSource来解决这个问题,以响应选择的头元素而不是加载三个不同的ListViews.

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

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

然后在_renderHeader函数中,您将渲染一个使用不同数据填充currentList的选择器,具体取决于所选标题.

反应 – 原生 – 在ScrollView中ListViews的分页？

猜你在找的React相关文章