3

使用 react native，ScrollView 可以捕捉到 ScrollView 元素的 y 轴上的重新指定点：

<ScrollView
snapToOffsets={[0,96]}

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

有没有办法在 96 处捕捉到该点，然后正常滚动而不会从该点向下捕捉偏移。

这种行为可以在 Web 上使用 CSS 完成，但没有明确的文档说明如何在 react 中做同样的事情。想象一下我们想在第一次滚动时捕捉到下面的标题，然后再正常滚动。

4

2 回答 2

2

默认情况下，列表的末尾算作捕捉偏移。将 snapToEnd 设置为 false 以禁用此行为并允许列表在其结尾和最后一个捕捉偏移之间自由滚动

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

snapToEnd={false}

文件

于 2021-06-30T16:13:42.773 回答
1

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

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

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

this.state= {
        staticScrollY: 0,
}

为 onScroll 添加一个监听器来跟踪滚动位置。

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

在 Constructor 和 Render 之间创建一个函数

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

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

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

QED..

PS。在 Momentum Scroll 上添加了此解决方案的限制。如果有人可以解决这个问题，请发布。

于 2020-03-05T14:26:43.990 回答