Instagram 如何在个人资料页面中实现两个滚动

Question

我在开发类似于 Instagram 和 Twitter 的社交应用程序时遇到问题。

我似乎无法克隆 Instagram 上的个人资料页面，我不明白他们是如何做到的。

在此输入图片描述

如果你可以看到这里的滚动条不是从顶部开始的，从中我可以看到平面列表或类似的内容是从底部开始的。但同时我可以从顶部滚动，它会对顶部和底部都有响应。所有这些和选项卡选择器在滚动后都会粘住。

有人可以解释一下他们是如何做到的吗？你同时使用了scrollView和Flatlist吗？ 或者如何？

这真的很有帮助，因为我被困在这里。

谢谢你

我尝试了很多 React 自定义组件以及在 Flatlist 和 ScrollView 之间手动合并。到目前为止还没有做到。

Answer 1

如果我理解正确的话，您想要 Instagram 中的个人资料屏幕的相同功能。 当我创建社交媒体应用程序时，我遇到了同样的挑战，该过程可能看起来像两个卷轴和一个粘性标题，但它会是这样的：

屏幕上的父级滚动视图。

    <Animated.ScrollView
        style={{ paddingTop: 50, }}
        keyboardDismissMode="on-drag"
        keyboardShouldPersistTaps={'always'}
        showsVerticalScrollIndicator={false}
    >
        <ProfileHeader />
        <ProfileContent />
        <ProfilePost />
    </Animated.ScrollView>

动画标题包裹在动画视图中。

         <Animated.View>
            {/* {Your content for the header goes here} */}
        </Animated.View>

动画内容包裹在动画视图中。

         <Animated.View>
            {/* {Your content for the content goes here} */}
        </Animated.View>

Post 将被包装在 flatList 中，但将 scrollEnable 设置为 false。

        <FlatList
            style={{ paddingTop: 25, paddingBottom: 50 }}
            keyboardDismissMode="on-drag"
            keyboardShouldPersistTaps={'always'}
            showsVerticalScrollIndicator={false}
            data={formatData(posts, columnCount)}
            nestedScrollEnabled={true}
            scrollEnabled={false}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            numColumns={3}
            contentContainerStyle={styles.container}
        />
    

如果在flatList上将scrollEnable设置为true，它将创建一个奇怪的滚动行为，并且在这种情况下父级的滚动就足够了。

检查那些源文件，它们可能会帮助您理解该过程。

• 个人资料屏幕的来源
• 标题来源
配置文件内容的组件源
个人资料帖子
• 组件的组件源