Question

我有一个动画组件，用于以幻灯片形式显示图像并带有一些缓动的动画，我使用平面列表在动画完成后一个接一个地显示图像。一切都很好。但是我在与

相关的代码中收到警告

componentWillReceiveProps弃用

因此，我尝试将 componentWillReceiveProps 替换为 componentDidUpate 。但是最终出现了一些错误。我具有保留动画并在动画结束时更新状态的功能。因此，每当 componentDidUpate 时，由于上一次状态更新，组件将再次呈现。

以下代码段运行正常

componentWillReceiveProps(nextProps) {
    this.state.translateX.stopAnimation(() => {
        if(nextProps.focusedIndex == nextProps.index) {
            this.startAnimation();
        }
    });
}

下面是我正在尝试的

 componentDidUpdate(prevProps, prevState){  
        if (prevProps.focusedIndex === prevProps.index) {
            console.log(prevProps.focusedIndex);
            this.state.translateX.stopAnimation(() => {
                this.startAnimation();
            });
        }
    }

startAnimation方法

startAnimation() {
    const { duration } = this.props;

    let extraSpacing = Math.floor(this.getExtraSpacing());

    if(this.getDirection()) extraSpacing *= -1;

   Animated.timing(this.state.translateX, {
        toValue: -extraSpacing,
        easing: Easing.ease,
        useNativeDriver: true,
        duration: duration * 1.1,
    }).start(() => {
        this.setState({ translateX: new Animated.Value(0) });
    });
}

错误：始终违反：超出了最大更新深度。

我正在使用此组件：react-native-timed-slideshow

对componentDidUpdate进行react-native动画重置

0 个答案: