onPress中的本机动画旋转视图

Question

我试图旋转我的图像时，它是按下如下：

this.myView.transitionTo({ rotate: '180deg' }, 200);

我得到了错误：

不变冲突:用“旋转”键进行转换必须是字符串：{“旋转”：null}

使用react-native-animatable库。不确定转换道具的正确语法是什么。

谢谢。

Answer 1

试试这个对我有用的。

import * as Animatable from "react-native-animatable";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      back: false
    };
  }
  render() {
    return (
      <TouchableOpacity
        onPress={() => this.setState({ back: !this.state.back })}
      >
        <Animatable.Image
          source={require("./assets/images/nike.png")}
          style={{ width: 100, height: 100 }}
          animation={{
            from: {
              rotate: this.state.back ? "180deg" : "0deg"
            },
            to: {
              rotate: this.state.back ? "180deg" : "0deg"
            }
          }}
        />
      </TouchableOpacity>
    );
  }
}

Answer 2

这对我有用。

import * as Animatable from "react-native-animatable";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      back: false
    };
  }
  render() {
    return (
      <TouchableOpacity
        onPress={() => this.setState({ back: !this.state.back })}
      >
        <Animatable.Image 
            animation = {{
                from: {
                    transform: [{ rotate: this.state.back?'0deg': '45deg'}]
                },
                to: {
                    transform: [{ rotate: this.state.back?'45deg' : "deg0"}]
                }
            }}
            source={icon} style={{}}  resizeMode = {"contain"}/> 
      </TouchableOpacity>
    );
  }
}