React Native:垂直FlatList嵌套在水平ScrollView中,垂直ScrollView内

时间:2020-07-13 23:05:51

标签: javascript react-native react-native-flatlist react-native-scrollview

我知道标题听起来像一场噩梦,确实如此。这是我希望完成的工作,但已经失败了几个小时:

一个屏幕具有可滚动的标题(因此位于最外面的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。

Unscrolled Twitter profile

Scrolled (horizontally and vertically) Twitter profile

不幸的是,垂直ScrollView内部的垂直FlatList删除了所有FlatList优化并中断了所有“ onEndReached”调用。

谢谢您的帮助。

0 个答案:

没有答案
相关问题