React Native-Animated.Text不透明度-仅动画0 => 1,但不动画1 => 0

时间:2018-09-05 13:43:29

标签: react-native animation opacity

我对Animated.Text动画有问题-我想根据道具上提供的错误的存在来更改不透明度。

Animated.Text在不透明度从0变为1时按预期方式工作,但是它不执行相反变化的动画(1 => 0)-它消失了。

class FloatingLabelInput extends Component {

    constructor(props) {

        super(props)

        this.state = {
            isFocused: false,
            value: '',
        }

        this._animatedIsFocused = new Animated.Value(this.state.value == '' || this.state.value === null ? 0 : 1)
        this._animatedErrorVisibility = new Animated.Value(this.props.error ? 1 : 0)
    }

    componentDidUpdate = () => {

        const { isFocused, value } = this.state
        const { error } = this.props

        Animated.timing(this._animatedIsFocused, {
            toValue: (isFocused || value) ? 1 : 0,
            duration: 200,
        }).start()

        Animated.timing(this._animatedErrorVisibility, {
            toValue: error ? 1 : 0,
            duration: 500,
        }).start()
    }

    createErrorTextStyle = () => {
        return {
            opacity: this._animatedErrorVisibility
        }
    }

render() {

    const { label, error, ...props } = this.props

        return (

            <View style={{ paddingTop: 18, marginTop: 15, marginBottom: 15, width: 230 }}>
                <Animated.Text style={this.createErrorTextStyle()}>{error}</Animated.Text>
            </View>
        )
    }
}

有什么建议可以使它正常工作吗?

谢谢!

0 个答案:

没有答案