react-native - 正确地去抖动如何反应原生动画

Question

我正在构建一个 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>
    )
  }
}

[...]

最大的问题是当对第一个单词使用自动更正时，文本长度变为零（用于显示或隐藏它的测试）并且返回太快，阻塞了动画

伊姆古尔