Question

我试图在本机上运行淡出动画，但它只会在componentDidMount上运行一次。

运行动画的任何其他工作，即使函数运行，也不会显示动画。

此类在父组件上运行，该组件将此组件呈现6次。

我正在使用mobx运行这个原生应用程序，因此典型的反应生命周期钩子不一定按预期工作。

import React, { Component } from 'react';
import { Animated } from 'react-native';

class FadeOut extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0.3)
        };
    }

    componentDidMount() {
        console.log('testing lifecyles compdidmount');
        this.animateDetail();
    }

    componentWillUpdate() {
        console.log('componentWillUpdate');
        this.animateDetail();
    }

    animateDetail = () => {
        console.log('running animate Detail');
        Animated.timing(this.state.fadeAnim, {
            toValue: 0.01, // Animate to opacity: 1 (opaque)
            duration: 500 // Make it take a while
            // useNativeDriver: true
        }).start(console.log);
    };
    render() {
        const { fadeAnim } = this.state;
        return (
            <Animated.View
                style={{
                    ...this.props.style,
                    opacity: fadeAnim
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

export default FadeOut;

Answer 1

这是因为你没有恢复动画价值。

在构造函数中设置动画参数的初始值（0.3）。然后你将它设置为0.01。在所有尝试将其设置为0.01的动画之后都没有视觉效果 - 它已经是0.01。

因此，为了完成您的目的，您需要使用Animated界面（通过setValue(nextValue)动态或立即动画回动值），然后再调用animateDetails()。

React Native：动画不透明度转换仅从componentDidMount运行

1 个答案: