React-native - 带有分隔符的水平FlatList中的分页

Question

如何使用分隔符调整水平FlatList，以便在启用分页时跳过分隔符。我只想在项目之间滑动时才能看到分隔符。我试图在getItemLayout中设置它，但它没有正常工作。我使用了getItemLayout = (_, index) => ({ length: window.width, offset: (window.width + separatorWidth) * index, index }) Behaviour looks like that

Answer 1

这也让我感到困惑。

从snap继承/扩展的一些<ScrollView>相关属性在这里很有用。 结帐：snapToInterval和snapToOffsets。

如果您使用<FlatList>或<ScrollView>充当水平全角轮播，并希望强制对齐，以使列表中的单个“页面”始终位于视图中（即用户不能在视图之间部分停下来），这些快照道具正是您所需要的。

注意：您需要禁用 pagingEnabled，以便尊重这些道具。

简化的示例代码：

render() {
  const totalItemWidth = window.width + separatorWidth;

  return (
    <FlatList
      { /* ... other props — data, renderItem, style, etc ... */}
      horizontal
      showsHorizontalScrollIndicator={false}
      snapToInterval={totalItemWidth}
      decelerationRate="fast"
      bounces={false}
      getItemLayout={(data, index) => ({
        length: totalItemWidth,
        offset: totalItemWidth * index,
        index,
      })}
      ItemSeparatorComponent={SomeSeparatorComponent}
    />
  )
}

在iOS和Android上的行为方式：

Android有点笨拙，我仍在完善decelerationRate和整体感觉...但是，它接近了，IMO。