IT技术 - ScrollView 中带有 FlatLists 的选项卡 - 如 Instagram 或 Twitter 个人资料页面 - 吾爱随笔录

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

IT技术 reactjs react-native scrollview react-native-flatlist

2021-05-16 07:43:27

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

我知道有一个FlatListinside aScrollView并触发 onEndReached有一些问题，因为只ScrollView注册了的滚动事件？

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

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

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

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

任何帮助将非常感激。

更新

我还研究了实施：ScrollView 内的 FlatList 不滚动

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

第二次更新

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

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 Nested Listview Triggers onEndReached Multiple Times - React Native 嵌套 ListView 在加载时触发 onEndReached 多次

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

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

2个回答

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

例如：

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

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

编辑：

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

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

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

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

这是解决问题的一种方法：

<ScrollView
          showsVerticalScrollIndicator={false}
          stickyHeaderIndices={[1]} //give any view index which you wana stick
          >
          <Header1 />
          <TabBar />
          <ViewPager
            ref={viewPagerRef}
            style={{
              flexGrow: 1,
            }}
            scrollEnabled={false}
            initialPage={0}
            orientation="horizontal">
            <Page1 key="1" />
            <Page2 key="2" />
            <Page3 key="3" />
          </ViewPager>
        </ScrollView>

其它你可能感兴趣的问题

上一篇打印出来的很细下一篇react酶找到第二个（或第 n 个）节点