15

我在一个组件中有 3ListView个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并且警报运行，但 commonHeader不会滚动，因为我们刚刚删除了 wrapping ScrollView。标题需要随着列表视图滚动，这就是为什么我将需要滚动的所有内容都包装在ScrollView.

重要提示：对于这种情况， 我不能真正使用ListViewwith 。renderHeader={this.header}因为，即使会滚动，它也会在每次 a渲染时Header重新渲染 commonHeader和 3 个选项卡，而不是一次。因此，每次为每个新的重新渲染都不会为应用程序削减它。ListViewListViewHeaderListView

寻找解决此问题的方法，其中Header使用 listviews 滚动，并且onEndReached为 visible 触发ListView。

4

3 回答 3

2

我认为您将不得不通过更改每个 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

于 2016-09-06T07:10:25.700 回答
0

在样式中，您可以将其位置设置为相对于 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 指定高度。

于 2016-08-11T04:49:01.207 回答
0

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

仅使用 ListView

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

如果您在ListView::onEndReached触发时更新数据集，我认为您可以向 ListView 添加更多元素。这样，您就不需要在 ScrollViews 中对 ListViews 做一些骇人听闻的事情了。

于 2016-09-06T07:16:10.767 回答