React Native ScrollView - 如何一一滚动项目？

Question

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

Answer 1

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

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

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

Answer 2

假设你想要snap水平或垂直地移动某个项目，则其位置需要相对于屏幕固定（它应该对齐的位置）

由于这些道具仅适用于 IOS，因此

您可以使用

• decelerationRate0-一旦用户抬起手指，将减加速度设置为 。
• 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>