React Native - ScrollView 中 ListViews 的分页？

Question

我在单个 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>

Header 组件有一些共同的内容，也有 3 个选项卡，触发显示相应的 ListView

问题是任何 ListView 和 onEndReached={() => alert('load more 1')} 永远不会运行警报，所以当我向下滚动并点击列表视图的末尾时，我永远无法加载更多内容。删除包装 ScrollView 并且警报运行，但公共 Header 不滚动，因为我们刚刚删除包装 ScrollView。 header 需要与列表视图一起滚动，这就是为什么我将需要滚动的所有内容都包装在 ScrollView.

中

重要提示： 对于这种情况，我真的不能将 ListView 与 renderHeader={this.header} 一起使用。因为，即使 Header 会滚动，它也会在每次 ListView 呈现时重新呈现公共 Header 和每个 ListView 的 3 个选项卡，而不是一次。因此，每次为每个 ListView 重新呈现一个新的 Header 不会为应用程序削减它。

寻找此问题的解决方案，其中 Header 随列表视图滚动，onEndReached 为可见的 ListView.

触发

Answer 1

在样式中，您可以将其位置设置为 top:0 和 left:0 的相对位置。这样它将在顶部保持静态。

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

可能在滚动视图中起作用的第二个选项是为所有三个 ListView 指定高度。

Answer 2

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

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

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

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

Answer 3

您也许可以使用 ScrollView::onScroll，但这会有点麻烦。您需要知道列表视图的大小。

仅使用 ListView

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

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

React Native - ScrollView 中 ListViews 的分页？

React Native - Pagination of ListViews in ScrollView?

react-native

react-native-listview

react-native-scrollview

仅使用 ListView