时间戳

首页 > 解决方案 > Flatlist 每次滑动手势最多滚动一项

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

问题描述

我有 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 个项目。

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

太感谢了！

标签： react-native

解决方案

在您的 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}
                />

推荐阅读