Как мне анимировать нативный компонент React с помощью библиотеки "Animated"

Question

Я пытаюсь оживить какой-то компонент. Я просто хочу изменить размер ширины просмотра. Я искал самый простой способ сделать простую анимацию. Я использую библиотеку "Анимированные". Я не могу сделать эту работу

Я ищу некоторые учебные пособия, и они не работают. По какой-то причине код не восстанавливает начальную ширину "Animated.View", это переменная, объявленная в конструкторе, как эта "animationwidth = new Animated.Value (11); ". Я не знаю, заключается ли проблема в объявлении переменной, в стиле" Animated.View "или в функции" animated.timing "

import React, { Component } from 'react';
import {Animated,Text,Alert,View, Image, Button} from 'react-native';

export default class Game extends Component {
    constructor(props) {
        super(props);
        this.state = {
            opa: 1
        };
        animationwidth = new Animated.Value(11);

    }
    componentDidmount(){
        Animated.timing(this.animationwidth, {
            toValue: 300
        }).start()
    }

    render(){
        return(
            <View style={{flex:1,alignItems:'center',backgroundColor:'green',justifyContent:'center'}}>
                <Animated.View style={{ height:250, width:this.animationwidth ,backgroundColor:'blue'}}/>
            </View>
        )
    }
}

Answer 1

Проблема здесь в том, что метод рендеринга не вызывается снова, так как состояние не обновляется снова. Вам необходимо обновить некоторую переменную состояния в componentDidmount, и, таким образом, метод render будет вызываться снова. Добавьте переменную состояния и переключите эту переменную в componentDidMount

    this.state = {
        isShowing : false
    };

    componentDidmount(){
      this.setState({isShowing:!this.state.isShowing})
      Animated.timing(this.animationwidth, {
        toValue: 300
      }).start()
    }

Answer 2

Вы забыли включить состояние для анимации:

измените стиль компонента Animated.View следующим образом:

<Animated.View style={{ height:250, width:this.state.animationwidth ,backgroundColor:'blue'}}/>

, если не анимируется.добавьте свойство duration в функцию анимации синхронизации, а также добавьте состояние к ширине анимации следующим образом:

        Animated.timing(this.state.animationwidth, {
        toValue: 300,
        duration: 1000
    }).start()
}

на основе вашего кода ширина вашего представления начнется с 11 и закончится 300