仅对一次快照反应 Native snapToOffsets，然后正常滚动

Question

使用本机反应，ScrollView 可以捕捉到 ScrollView 元素的 y 轴上重新指定的点：

<ScrollView
snapToOffsets={[0,96]}

这将捕捉到 0 和 96。然而，似乎还必须声明每个后续捕捉点。

有没有一种方法可以捕捉到 96 处的那个点，然后正常滚动而不会从该点向下移动捕捉偏移量。

此行为可以在网络上使用 CSS 完成，但没有关于如何在 React 中执行相同操作的明确文档。想象一下 header，我们想在第一次滚动时捕捉到它的下方，然后再正常滚动。

Answer 1

是的，但并不完美。你可以让它像你期望的那样工作。此解决方案的唯一问题是，当向上滚动由 Momentum 控制时，不会触发快照。

考虑到当前的限制，诀窍是改用 snapToInterval，然后动态更新 snapToInterval 属性 onScroll。

在构造函数中创建一个状态。

this.state= {
        staticScrollY: 0,
}

为 onScroll 添加监听器以跟踪滚动位置。

listener: (event) => this.handleOnScroll(event.nativeEvent.contentOffset.y)

在构造器和渲染器之间创建一个函数

handleOnScroll = event => {
        this.setState({
            staticScrollY: event,
        })
    }

在 snapToInterval 属性中使用一个三元运算符，其中包含您想要的第一个快照的数量以及快照应该大于该数量的数量。

snapToInterval={this.state.staticScrollY < 99 ? 98 : 0}

QED..

PS。此解决方案对 Momentum Scroll 添加了限制。如果有人可以解决这个问题，请post。

Answer 2

By default, the end of the list counts as a snap offset. Set snapToEnd to false to disable this behavior and allow the list to scroll freely between its end and the last snap offsets offset

您可以将 snapToEnd 设置为 false 以禁用此行为

snapToEnd={false}

documentation

仅对一次快照反应 Native snapToOffsets，然后正常滚动

React Native snapToOffsets for only one snap and then scroll normally

react-native

scroll-snap-points