Реагировать Native предел OnScroll

Question

Извинения для начинающих Реагировать Native вопрос ....

Я воедино анимацию на ListView свитка:

<ListView scrollEventThrottle={16} 
    onScroll={ 
     Animated.event([{nativeEvent: {contentOffset: { y: this.state.animTranslateY}}}] 
     ) 
    } 
    ... 
/> 

<Animated.View style={[{height: 50, 
    position: 'absolute', 
    right: 0, 
    left: 0, 
    top: 0, 
    transform: [{ translateY: this.state.animTranslateY.interpolate({ 
     inputRange: [0, this.state.infoHeight], 
     outputRange: [this.state.infoHeight, 0] }) }] 
    }]} 
}> 
    ... 
</Animated.View> 

Я хочу, чтобы ограничить анимацию так, что после того, как пользователь прокрутил определенное расстояние (скажем, 100 пикселей), событие больше не происходит, эффективно фиксируя анимированный вид на месте.

Я попытался вставить условие в событие onScroll (if (event.nativeEvent.contentOffset.y < 100) {}), но мой синтаксис выключен. Я пробовал создать отдельную функцию, но не могу заставить ее работать с Animated.event (и простой event производит сильный удар, даже с scrollEventThrottle).

Может ли кто-нибудь порекомендовать как правильно вставить условное обозначение? Или же произвести функцию, используя Animated.event?

Спасибо!

Answer 1

Возможно, вам стоит попробовать ScrollView. Он имеет опцию scrollEnabled, которую вы можете изменить на false, если вы не хотите, чтобы пользователь мог прокручивать больше. ScrollView также имеет onScroll, поэтому здесь должно быть легко реализовать логику.

Вот документы для ScrollView: https://facebook.github.io/react-native/docs/scrollview.html#scrollenabled

Answer 2

Используйте extrapolate clamp, чтобы сделать это. Из документов: «По умолчанию он будет экстраполировать кривую за пределы заданных диапазонов, но вы также можете заставить ее зажимать выходное значение». При нажатии на ваше выходное значение вы остановите анимацию после того, как она достигнет последнего выходного значения.

transform: [{ translateY: this.state.animTranslateY.interpolate({ 
    inputRange: [0, this.state.infoHeight], 
    outputRange: [this.state.infoHeight, 0] }) }], 
    extrapolate: 'clamp' 
}]} 

Этот код будет остановить перевод как только ваш inputRange хиты this.state.infoHeight.