ScrollView中带有FlatList的选项卡-如Instagram或Twitter个人资料页面

Question

我希望有一组选项卡，每个选项卡都有FlatList一个ScrollView。这类似于Instagram或Twitter的布局。

我知道，由于仅注册了滚动事件，所以在a FlatList内部有一个问题ScrollView并触发onEndReached 存在一些问题ScrollView？

这导致内部onEndReached在加载时立即被调用，然后又一次又一次地被调用...

如果将ScrollView scrollEnabled设置为false flex: 1，flexGrow: 1则可以使内部FlatList滚动，但不使外部内容滚动……如下所示：

我认为很多人都在为这个问题而苦苦挣扎，我在任何地方都找不到真正明确的解决方案。

我也试图实现react-navigation-collapsible与createMaterialTopTabNavigator创建标签。但是，您不能在整个屏幕上实现“拉动刷新”吗？

任何帮助将非常感激。

更新资料

我也研究了实现：ScrollView中的FlatList不滚动

并且我研究了动态切换scrollEnabled属性（即使它创建了一个重新渲染。此ALMOST可以工作...但是ScrollView高度存在问题，flexGrow: 1并且内部FlatList没有填充空间...

第二次更新

这种零食几乎可以做正确的事... https://snack.expo.io/@satya164/collapsible-header-with-tabview 它react-native-tab-view使用动画折叠标题。如果标头是组件，则它可以在加载时获取数据，但内部列表上将仅具有拉动刷新功能（与Instagram不同）。

相关问题：

onEndReached被无限调用存在一个问题-https: //github.com/facebook/react-native/issues/18887-https : //github.com/facebook/react-native/issues/6002

FlatList无法在ScrollView内部正常工作...- https://github.com/facebook/react-native/issues/12827#issuecomment-320509824

ScrollView内部的平面列表-https: //github.com/facebook/react-native/issues/19971

ScrollView中的FlatList无法滚动-https: //github.com/facebook/react-native/issues/19971

FlatList子对象正在渲染上调用onEndReached- https://github.com/react-native-community/react-native-tab-view/issues/501

React Native嵌套Listview多次触发onEndReached- React Native嵌套ListView多次触发onEndReached

当FlatList包装在ScollView中时，onEndReached无法正常工作。- https://github.com/facebook/react-native/issues/22008

类似Twitter的个人资料布局- 如何创建类似Twitter的个人资料布局？但是我相信答案现在是不正确的。

Answer 1

也许您应该使用 Animated api 来处理 TabView 内容和标题的translateY。

例如：

<View>
   <Header />
   <TabView /> //With lists
<View>

您的 Header 应该有一个position: 'absolute'固定的高度，并且您的 TabView 应该有一个透明的 paddingTop 以匹配 Header 高度。一旦滚动一个或其他列表，您transform: [{ translateY }]也应该移动 Header 和 TabView，这样它就可以匹配 Header 的位置，直到它夹紧为止。

编辑：

抱歉，没有看到您关于世博会示例的更新。

您的博览会示例有一些错误。例如，如果您滚动一个列表（以隐藏标题），您的第二个列表将有一个空格。

您应该将列表（包含列表的 TabView）的高度设置为窗口高度 - 限制标题大小。这样，您可以将选项卡视图的translateY 设置为标题的大小。一旦开始向上滚动，您应该翻译标题和选项卡视图，直到其夹紧。从那时起，您应该只滚动列表。

另一个解决方案是增加 tabView onScroll 的高度以匹配 header 的translateY