React Native ScrollView - 如何逐个滚动项目？

Question

如何使用 React Native ScrollView 禁用惯性滚动，以便无论您施加什么力，它都会成为列表要滚动到（并捕捉到）的下一个元素？我查看了道具列表，其中任何一个都直接实现了我想要实现的目标。

Answer 1

假设您想要 snap 一个项目水平或垂直，它的位置需要相对于屏幕固定（它应该对齐的位置）

由于道具仅供IOS使用，因此

您可以使用

decelerationRate- 将减速率设置为0，一旦用户抬起手指
snapToAlignment - 将特定元素的对齐方式设置为居中

snapToInterval - 根据您的 contentInset 道具设置捕捉的间隔。

<ScrollView 
    horizontal
    decelerationRate={0}
    snapToInterval={width - (YOUR_INSET_LEFT + YOUR_INSET_RIGHT)}
    snapToAlignment={"center"}
    contentInset={{top: 0, left: YOUR_INSET_LEFT, bottom: 0, right: YOUR_INSET_RIGHT,
    }}>
    <Comp/>
    <Comp/>
    <Comp/>
    <Comp/>
  </ScrollView>

Answer 2

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

https://reactnative.dev/docs/scrollview#disableintervalmomentum

<ScrollView 
  horizontal
  disableIntervalMomentum={ true } 
  snapToInterval={ width }
>
  <Child 1 />
  <Child 2 />
</ScrollView>

React Native ScrollView - 如何逐个滚动项目？

React Native ScrollView - How to scroll items one by one?

scrollview

react-native