React native 如何正确地消除对本地动画的影响

我正在构建一个translateY e opacity组件来设置表单末尾显示的提交按钮的动画。问题是每次道具变化太快时，按钮就会停止工作

[...]

class ShyButton extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { height: 0, visible: props.isVisible }
    this.animatedValue = new Animated.Value(props.isVisible ? 1 : 0)
  }

  componentDidUpdate(prevProps, prevState) {
    const { isVisible } = this.props

    if (prevProps.isVisible !== isVisible) {
      if (isVisible) { this.toggleVisibility(prevState, true) }

      Animated.timing(this.animatedValue,
        { toValue: isVisible ? 1 : 0, duration: 800, useNativeDriver: true }
      ).start(() => { if (!isVisible) { this.toggleVisibility(prevState, false) } })
    }
  }

  toggleVisibility = (prevState, visible) => this.setState({ ...prevState, visible })

  onLayout = event => this.setState({ height: event.nativeEvent.layout.height })

  render() {
    const { isVisible, style, children, ...props } = this.props
    const { height, visible } = this.state
    const animatedStyle = {
      opacity: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
      transform: [
        {
          translateY: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [height, 0],
            extrapolate: 'clamp'
          })
        }
      ]
    }
    const combinedStyle = StyleSheet.flatten([style, { opacity: 0, transform: [{ translateY: 0 }] }])
    const animatingStyle = StyleSheet.flatten([combinedStyle, animatedStyle])
    return (
      <Animated.View onLayout={this.onLayout} style={visible ? animatingStyle : combinedStyle} {...props}>
        {visible ? children : null}
      </Animated.View>
    )
  }
}

[...]

[…]
类ShyButton扩展了PureComponent{
建造师（道具）{
超级（道具）
this.state={height:0，visible:props.isVisible}
this.animatedValue=新的Animated.Value（props.isVisible？1:0）
}
componentDidUpdate（prevProps、prevState）{
const{isVisible}=this.props
如果（prevProps.isVisible！==isVisible）{
if（isVisible）{this.toggleVisibility（prevState，true）}
动画.计时（此.animatedValue，
{toValue:isVisible？1:0，持续时间：800，useNativeDriver:true}
).start（（）=>{if（！isVisible）{this.toggleVisibility（prevState，false）}
}
}
toggleVisibility=（prevState，visible）=>this.setState（{…prevState，visible}）
onLayout=event=>this.setState（{height:event.nativeEvent.layout.height}）
render（）{
const{isVisible，style，children，…props}=this.props
const{height，visible}=this.state
常量animatedStyle={
不透明度：this.animatedValue.interpolate({
输入范围：[0，1]，
outputRange:[0，1]，
}),
转换：[
{
translateY:this.animatedValue.interpolate({
输入范围：[0，1]，
outputRange:[高度，0]，
推断：“钳子”
})
}
]
}
const combinedStyle=StyleSheet.flatte（[style，{opacity:0，transform:[{translateY:0}]}]）
const animatingStyle=StyleSheet.flatte（[combinedStyle，animatedStyle]）
返回(
我最近遇到了类似的问题，修复方法是在重新启动动画之前重置动画。因此，如果（isVisible）{this.toggleVisibility（prevState，true）

，请在此处添加

this.animatedValue.setValue（0）

在那里-这将确保动画从0开始。我也不确定是否需要将

prevState

传递到

toggleVisibility

，可能是代码示例中不可见的原因。