ScrollView 中带有 FlatLists 的选项卡 - 如 Instagram 或 Twitter 个人资料页面 [英] Tabs with FlatLists inside ScrollView - like Instagram or Twitter profile pages

问题描述

我想要一组标签，每个标签在 ScrollView 中都有一个 FlatList.这类似于 Instagram 或 Twitter 的布局.

I would like to have a set of tabs that each have a FlatList inside a ScrollView. This is similar to the layout of Instagram or Twitter.

我知道在 ScrollView 中有一个 FlatList 并且让 onEndReached 仅作为 ScrollView 被触发存在一些问题s 滚动事件是否已注册?

I am aware that there are some issues with having a FlatList inside a ScrollView and getting onEndReached to be triggered as only the ScrollView's scroll events are registered?

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

This results in the inner onEndReached being called immediately on load and then over and over again...

如果您将 ScrollView scrollEnabled 设为 false 和 flex: 1 而不是 flexGrow: 1 那么您可以让内部 FlatLists 滚动但外部内容不会...这看起来像这样:

If you make the ScrollView scrollEnabled false and flex: 1 instead of flexGrow: 1 then you can get the inner FlatLists to scroll but the outer content doesnt... This looks like this:

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

I think there are a lot of people who are struggling with this problem and I can't find a really clear solution anywhere.

我还尝试使用 createMaterialTopTabNavigator 实现 react-navigation-collapsible 来创建选项卡.但是，您不能在整个屏幕上实现下拉刷新吗?

I have also tried to implement react-navigation-collapsible with createMaterialTopTabNavigator to create the tabs. However, you can't implement a pull-to-refresh on the whole screen?

任何帮助将不胜感激.

更新

我也考虑过实施:ScrollView 内的 FlatList 不滚动

并且我已经查看了动态切换 scrollEnabled 属性(即使它创建了重新渲染.这几乎可以工作......但是 ScrollView 高度存在一个问题 flexGrow: 1并且内部 FlatList 没有填充空间...

AND I've looked at dynamically toggling the scrollEnabled property (even though it creates a re-render. This ALMOST works... but there is an issue with the ScrollView height being flexGrow: 1 and the inner FlatList not filling the space...

第二次更新

这种小吃几乎做对了... https://snack.expo.io/@satya164/collapsible-header-with-tabview它使用 react-native-tab-view 并使用动画折叠标题.如果标题是一个组件，它可以在加载时获取数据，但您只能在内部列表上获得下拉刷新(与 Instagram 不同).

This snack almost does the right thing... https://snack.expo.io/@satya164/collapsible-header-with-tabview It uses react-native-tab-view and collapses the header using animation. If the header was a component, it could fetch data on load but you would only get a pull-to-refresh on the inner list (unlike Instagram).

相关问题:

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

There is an issue with onEndReached being called infinitely - 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

FlatList cannot work right inside a ScrollView... - https://github.com/facebook/react-native/issues/12827#issuecomment-320509824

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

Flatlist inside ScrollView - https://github.com/facebook/react-native/issues/19971

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

FlatList inside ScrollView doesn't scroll - https://github.com/facebook/react-native/issues/19971

FlatList 子进程在渲染时调用 onEndReached- https://github.com/react-native-社区/react-native-tab-view/issues/501

FlatList child is calling onEndReached on render - https://github.com/react-native-community/react-native-tab-view/issues/501

React Native 嵌套列表视图多次触发 onEndReached- 反应原生嵌套ListView触发onEndReached多次加载次数

React Native Nested Listview Triggers onEndReached Multiple Times - React Native nested ListView triggers onEndReached multiple times on loading

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

When FlatList wrapped inside ScollView, onEndReached doesnt work expected. - https://github.com/facebook/react-native/issues/22008

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

Twitter-like profile layout - How to create Twitter like profile layout? But I believe that the answer is now not correct.

推荐答案

可能你应该使用 Animated api 来处理 TabView 的内容和标题的 translateY.

Probably you should work with Animated api to handle the translateY of the content of TabView and the header.

例如:

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

你的 Header 应该有一个 position: 'absolute' 和一个固定的高度，你的 TabView 应该有一个 paddingTop 透明以匹配 Header 高度.滚动一个或其他列表后，您应该使用 transform: [{ translateY }] 和 TabView 移动标题，以便它可以匹配标题的位置，直到它被夹住.

Your Header should have a position: 'absolute' and a fixed height, and your TabView should have a paddingTop transparent to match the Header height. Once you scroll one or other list, you should move the Header with transform: [{ translateY }] and your TabView too, so it can match the position of the Header until it clamps.

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

Sorry, didn't saw your update about the expo example.

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

Your expo example has some errors. For example if you scroll one list (to hide the header) your second list will have a blank space.

您应该将列表的高度(包含列表的 TabView)设置为窗口高度 - 标题大小限制.有了这个，您可以将 tabview 的 translateY 设置为标题的大小.一旦开始向上滚动，您应该同时翻译标题和选项卡视图，直到它被夹住.从那时起，您应该只滚动列表.

You should set the height of the list (TabView containing the lists) to be the window height - header size clamped. With this you can set translateY of the tabview to be the size of the header. Once you start scroll up, you should translateY both the header and the tabview until it clamps. From that point you should only scroll the list.

另一种解决方案是增加 tabView onScroll 的高度以匹配标题的 translateY

Another solution would be increase the height of tabView onScroll to match the translateY of header

这篇关于ScrollView 中带有 FlatLists 的选项卡 - 如 Instagram 或 Twitter 个人资料页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！