Реагируйте Native snapToOffsets только на одну привязку, а затем прокрутите в обычном режиме

Question

При использовании собственного реагирования ScrollView может привязываться к заданным точкам на оси Y элемента ScrollView:

<ScrollView
snapToOffsets={[0,96]}

Это будет привязано к 0 и к 96. Однако представляется, что каждая последующая точка привязки должна также будет объявлено.

Есть ли способ привязки к этой точке на 96, а затем прокрутка в обычном режиме без смещения привязки от этой точки вниз.

Такое поведение можно сделать в Интернете с помощью CSS, но Нет четкой документации о том, как сделать то же самое в реакции. Представьте заголовок, под которым мы хотим закрепить первую прокрутку, а затем прокрутить как обычно.

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. Если кто-то может обратиться к этому, пожалуйста, напишите.