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

【问题标题】：React Native ScrollView - How to scroll items one by one?React Native ScrollView - 如何一项一项地滚动项目？
【发布时间】：2018-04-14 09:08:45
【问题描述】：

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

【问题讨论】：

标签： react-native scrollview

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

假设你想水平或垂直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>

【讨论】：

值得补充的是，由于 github.com/facebook/react-native/pull/15297 已被合并，这些道具也可以在 Android 上运行。
如何处理大型列表的recyclerlistview？
不知道 snap 属性。谢谢