React native 使用flex属性反应本机图像动画

我在一页的中央有一张大图。 图像下方有文本框。一旦用户单击文本框，我希望图像移动到页面的右上角

下面是该类的构造函数-

         constructor(props) {
            super(props);
            const {theme} = props;
            this.theme = theme;

    //****Initial state of the image (centered aligned on the parent container)
            this.state = {
              imgDimensions: {height: 93, width: 206, alignSelf: 'center'},
              keyboardOpen: false,
            };
    //********

            this.moveIcon = this.moveIcon.bind(this);
            this.unMoveIcon = this.unMoveIcon.bind(this);

            this._keyboardDidShow = this._keyboardDidShow.bind(this);
            this._keyboardDidHide = this._keyboardDidHide.bind(this);

            this.animatedValue = new Animated.Value(0);
          }

现在我在textbox上调用这个方法，单击以调整图像大小并移动到右上角-

  moveIcon() {
    this.setState({
      imgDimensions: {
        height: 39,
        width: 87,
        alignSelf: 'flex-end',
        top: getStatusBarHeight(),
        //marginTop: 20,
        position: 'absolute',
      },
    });

从柔性“中心”到“柔性末端”的移动是否可以设置动画？ 如果我能提供更多信息，请告诉我

这是图像代码-

        <Animated.Image
          style={{
            ...this.state.imgDimensions,

          }}
          source={require('../../assets/images/logo_final.png')}
          resizeMode="contain"/>

使用此软件包 安装

npm install react-native-animatable --save