Реактивный анимационный поворотный вид в onPress

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