react-native - onPress 中的 React-native Animatable 旋转视图

Question

我正在尝试使用以下方法按下图像时旋转我的图像：

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

我得到错误：

不变违规：使用“rotate”键进行转换必须是字符串：{“rotate”：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>
    );
  }
}