Question

如何使用React Native ScrollView禁用惯性滚动，这样无论您应用什么力量，它都将是列表将滚动到（并捕捉到）的下一个元素？我已经查看了道具列表，其中任何一个都直接完成了我想要达到的目标。

Answer 1

假设你想要snap水平或垂直项目，它的位置需要相对于屏幕固定（它应该在哪里拍摄）

因为道具仅适用于IOS

您可以使用

decelerationRate - 一旦用户抬起手指，将加速率设置为0
snapToAlignment - 将alignmnet设置为特定元素以居中

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

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

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

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

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

2 个答案: