React Native - непрозрачность Animated.Text - анимирует только 0 => 1, но не 1 => 0 - PullRequest
Новая
       44

React Native - непрозрачность Animated.Text - анимирует только 0 => 1, но не 1 => 0

0 голосов
/ 05 сентября 2018

У меня проблема с анимацией 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>
        )
    }
}

Любые предложения, что я могу сделать, чтобы это работало?

Заранее спасибо!

...