javascript - 尝试在父平面列表 React Native 中嵌套一个带有 2 个嵌套平面列表的 PagerView

Question

我知道只是通过阅读标题你可能在想，但为什么呢？好吧，我不确定这是否是正确的方法，但我正在尝试模仿 TikTok 个人资料页面的用户体验。我遇到的问题是，在父平面列表中充当分页视图的 Scrollview 必须增长到包含最多内容的列表的大小。当您滑动到加载的内容少得多的第二个平面列表时，这会导致问题，因为您能够向下滚动的次数超出您的预期。我可以想到一些变通方法，例如在寻呼机视图中卸载相邻的平面列表，但这似乎不是正确的方法，因为每次用户切换页面时都需要重新加载。

抖音实现：

我的实现：

return (
        <ScreenWrapper>
            <FlatList
                ref={outerListRef}
                StickySectionHeadersEnabled={true}
                stickyHeaderIndices={[2]}
                ListHeaderComponent={() => <RenderHeader />}
                contentContainerStyle={{
                    width: width,
                    borderWidth: 1,
                }}
                style={{ flex: 1 }}
                showsVerticalScrollIndicator={false}
                onEndReached={onEndReached}
                onEndReachedThreshold={0.1}
                data={[{ id: '1' }, { id: '3' }, { id: '4' }]}
                keyExtractor={(item) => item.id}
                renderItem={({ item, index }) => {
                    if (index === 1) {
                        return <RenderSectionHeader />
                    }
                    if (index === 2) {
                        return (
                            <ScrollView
                                showsHorizontalScrollIndicator={false}
                                style={{
                                    // flex: 1,
                                    left: 0,
                                    width: width,
                                    minHeight: '100%',
                                }}
                                horizontal={true}
                                snapToInterval={width}
                                snapToAlignment={'start'}
                                decelerationRate={'fast'}
                                disableScrollViewPanResponder={!enable}
                            >
                                <View style={styles.bigList}>
                                    <FlatList
                                        style={styles.bigList}
                                        data={galleries}
                                        renderItem={render}
                                        contentContainerStyle={{
                                            minHeight: '100%',
                                            width: width,
                                        }}
                                        layOut={layOut}
                                        keyExtractor={ keyExtractor}
                                        numColumns={2}
                                        onScroll={({ nativeEvent }) => {
                                            let currentOffset =
                                                nativeEvent.contentOffset.y

                                            if (currentOffset < 1) {
                                                setEnable(false)
                                            }
                                        }}
                                    />
                                </View>
                                <View style={styles.bigList}>
                                    <BigList
                                        // scrollEnabled={false}
                                        data={galleries2}
                                        renderItem={
                                            listShown === 'galleries'
                                                ? render
                                                : renderLiked
                                        }
                                        itemHeight={
                                            listShown === 'galleries'
                                                ? itemHeight
                                                : itemHeightLiked
                                        }
                                        layOut={
                                            listShown === 'galleries'
                                                ? layOut
                                                : getItemLayoutLiked
                                        }
                                        keyExtractor={
                                            listShown === 'galleries'
                                                ? keyExtractor
                                                : keyExtractorLiked
                                        }
                                        numColumns={2}
                                        // onRefresh={loadGalleries}
                                        // refreshing={loadingGalleries}
                                        showsVerticalScrollIndicator={false}
                                        // onEndReached={() => {
                                        //     console.log('End Reached')
                                        //     onEndReached()
                                        // }}
                                    />
                                </View>
                            </ScrollView>
                        )
                    }
                }}
            />
         
             
        </ScreenWrapper>
    )