在平面列表中滾動時如何獲得彈性/彈性效果

Question

如何在 React Native 中制作一個垂直的 Flatlist 項目以在滾動時插入 position 並填滿當前的 window？ 我希望每個項目都填滿屏幕，而不是顯示之前或即將到來的項目。 我想要的效果示例是在 ScrollView 中通過設置 pagingEnabled={true} 實現的。 但我的問題是，當應用於 Flatlist 時，前一個項目的部分顯示在后續視圖的頂部。 當您向下滾動時，它的大小會增加。 我想要的效果就像你在 TikTok 上滾動一樣。 您會看到每個視頻如何填滿屏幕，當您向上或向下滾動時，會出現一種彈性效果，如果滾動沒有完成，當前視頻會彈回 position。

這是我當前的平面列表：

<FlatList
            data={DATA}
            renderItem={renderItems}
            keyExtractor={item => item.id}
            Animated={true}
            removeClippedSubviews={true}
            refreshControl={
                < RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                />}

請注意，我使用的是功能組件而不是類。

提前致謝。

Answer 1

哇，幾個小時后，GeekForGeeks 救了我！ 這是這篇文章，感謝 Brijen Makwana。

答案是將 Flatlist 已經提供的三個道具應用到你/我的 flatlist。 他們是：

• snapToAlignment='開始'
• 減速率={'快'}
• snapToInterval={windowHeight}

所以我的 Flatlist 現在看起來像這樣：

<FlatList
            data={DATA}
            renderItem={renderItems}
            keyExtractor={item => item.id}
            snapToAlignment='start'
            decelerationRate={'fast'}
            snapToInterval={windowHeight}
        />

請記住首先從 React native 導入維度並使 Item View 具有 window（即屏幕）的全高和全寬：

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width;

在您的樣式表中：

StyleOfItemsContainerForFlatList: {
        height: windowHeight,
        width: windowWidth,
        justifyContent: "center",
        alignItems: "center"
    },

我在這里刪除了 Refreshcontrol，因為它與這個答案無關。 就像我的 React Native Vertical Flatlist 現在有一個像 Tiktok 和 Instagram 一樣有彈性的過渡 animation！

此外，本文還展示了如何在水平平面列表上應用 snap animation。

詳情請查看原文。