具有flex属性的本机图像动画

Question

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

这里是该类的构造函数-

         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);
          }

现在，我在文本框上单击此方法，以单击以调整图像大小并移至右上角-

  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"/>

Answer 1

使用此包装react-native-animatable安装

npm install react-native-animatable --save