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 安装

SPLIT_STRING

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

1 个答案: