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}
                />