react-native - Flatlist 每个滑动手势最多滚动一项

Question

我有 FlatList 元素:

<FlatList
    ref={listRef}
    data={data}
    onLayout={_onLayoutDimensionsChanged}
    keyExtractor={_keyExtractor}
    renderItem={_renderItem}
    initialScrollIndex={initialScrollIndex}
    onViewableItemsChanged={onViewableItemsChanged}
    viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
    ItemSeparatorComponent={ItemSeparator}
    snapToInterval={totalItemWidth}
    decelerationRate={0.0}
    getItemLayout={(data, index) => ({
      length: totalItemWidth,
      offset: totalItemWidth * index,
      index
    })}
    initialNumToRender={2}
    showsHorizontalScrollIndicator={false}
    removeClippedSubviews
    bounces
    horizontal
  />

其中 totalItemWidth 是:

totalItemWidth = itemsWidth + SEPARATOR_SIZE;

我想实现那个 滑动手势将最多移动一项 但即使减速率设置为 decelerationRate={0.0}如果我用手指滑动的速度比正常滑动的速度快一点，我的列表甚至会滑动 2 个项目。

有什么办法可以防止那里的双刷吗？我正在实现图片库，因此当用户可以一次滑动两张照片时，它对用户不是很友好。

非常感谢!

Answer 1

在您的 FlatList 中使用 disableIntervalMomentum={ true }。这将只允许用户一次水平滚动一页:

<AnimatedFlatList
                    disableIntervalMomentum={true} // use this
                    contentInset={{right: wp('20%')}}
                    showsHorizontalScrollIndicator={false}
                    ItemSeparatorComponent={separatorComponent}
                    decelerationRate={0.0}
                    snapToInterval={ITEM_SIZE}
                    horizontal={true}
                    scrollEventThrottle={1}
                    onScroll={onScrollEvent}
                    data={filteredData.filteredData}
                    renderItem={renderItem}
                    keyExtractor={keyExtractor}
                />