对卷轴

Question

为初学者的反应原生问题道歉......

我正在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，此代码将停止翻译。