反应本机动画滚动视图 onScroll 事件不适用于外部方法

Question

我在 ReactNative 中制作了一个折叠收费栏，当Animated.ScrollView contentOffset.y 等于 240时，我需要停止动画。如果我在外部函数中放置任何条件或调用 Animated.event，它就无法工作。

\n\n

Animated.Value.stopAnimation ()也不起作用。

\n\n

这有效：

\n\n

<Animated.ScrollView\n   scrollEventThrottle={1}\n   onScroll={\n     Animated.event(\n       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],\n       {useNativeDriver: true}\n     )\n   }\n>\n...\n

\n\n

这不起作用：

\n\n

handlerScroll() {\n  Animated.event(\n    [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]\n    {useNativeDriver: true}\n  )\n}\n...\nrender() {\n return(\n   <Animated.ScrollView\n      scrollEventThrottle={1}\n      onScroll={this.handlerScroll.bind(this)}\n    >\n )\n}\n...\n

\n\n

这也不起作用\xc2\xb4t

\n\n

<Animated.ScrollView\n   scrollEventThrottle={1}\n   onScroll={\n     this.state.canScroll &&\n     Animated.event(\n       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],\n       {useNativeDriver: true}\n     )\n   }\n>\n...\n

\n\n

我不知道我还能用什么来停止我的动画。

\n\n

我需要做出这样的效果：

\n\n

\n

Answer 1

为什么不将滚动事件映射用于设置为“clamp”的interpolate动画，而不是停止滚动事件映射？extrapolate这将阻止您的动画超出输入和输出值的范围。

\n\n

不确定您\xe2\x80\x99尝试设置什么样式的动画，但为了展示示例，让\xe2\x80\x99s说它是一个translateY变换：

\n\n

// onScroll map data to Animated value\nonScroll={Animated.event(\n    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],\n    { useNativeDriver: true }\n)}\n\n<Animated.View\n    style={{\n        transform: [{\n            translateY: this.state.scrollY.interpolate({\n                inputRange: [0, 240],\n                outputRange: [0, -160],\n                extrapolate: \'clamp\' // clamp so translateY can\xe2\x80\x99t go beyond -160\n            })\n        }]\n    }}\n>\n    ...\n</Animated.View>\n

\n