我知道标题听起来像一场噩梦,确实如此。这是我希望完成的工作,但已经失败了几个小时:
一个屏幕具有可滚动的标题(因此位于最外面的ScrollView),该标题还可以滚动第二个嵌套子级ScrollView。水平FlatList用于滚动浏览各节。最外面的ScrollView有一个粘性标头,用于导航水平ScrollView。这是一个简短的示例:
// This is just an example, this code won't run
<ScrollView>
<PageHeaderComponent/>
<StickyHeader/> // Shows navigation within horizontal ScrollView
<ScrollView horizontal={true} snapToInterval={SCREEN_WIDTH}>
<FlatList
style={{
width: SCREEN_WIDTH
}}
/>
<FlatList
style={{
width: SCREEN_WIDTH
}}
/>
</ScrollView>
</ScrollView>
看一下Twitter应用程序中的这两个可视示例(尚不能内嵌图像),或者如果有,请自己尝试。 第一个从屏幕顶部到“关注者”行,显示我指的“标题”。 第二个显示了滚动时顶部标题如何与页面的其余部分一起向上滚动,以及水平滚动时如何显示其他ScrollView。
Scrolled (horizontally and vertically) Twitter profile
不幸的是,垂直ScrollView内部的垂直FlatList删除了所有FlatList优化并中断了所有“ onEndReached”调用。
谢谢您的帮助。