在事件发生时响应本机可动画旋转图标180度

Question

每次尝试执行事件时，我都尝试将图标旋转180度。

链接：Expo

在BarCollapsible中找到它-> toggleView（）

我必须这样做，每次移动必须为180度。

如果必须打开折叠，则移动必须从底部向上到左侧。

如果我必须折叠该折叠，则该运动必须从上到下向左移动。

颜色不得更改。

import React, { Component } from 'react';
import {
  StyleSheet,
  Animated,
  View,
  Text,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform,
  Easing,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

const RippleColor = (...args) =>
  Platform.Version >= 21 ? TouchableNativeFeedback.Ripple(...args) : null;

/*const Animations = {
  rotate: {
    0: {
      rotate: '0deg',
      color: 'rgba(0,0,0,0.6)',
    },
    1: {
      rotate: '180deg',
      color: 'rgba(255, 87, 34, 0.5)',
    },
  },
};*/

export default class BarCollapsible extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
      icon: props.icon,
      onPressed: null,
      title: props.title,
      children: null,
      show: props.showOnStart,
    };
  }

  static defaultProps = {
    showOnStart: false,
    icon: 'angle-right',
    iconOpened: 'minus',
    iconActive: 'plus',
    iconCollapsed: 'plus',
    tintColor: '#ccc',
    iconSize: 15,
  };

  componentWillMount() {
    const { fadeAnim, spinValue } = this.state;
    Animated.parallel([Animated.timing(fadeAnim, { toValue: 1 })]).start(
      () => {}
    );
    /*Animatable.initializeRegistryWithDefinitions({
      rotate: Animations.rotate,
    });*/
  }

  toggleView = () => {
    const { show, iconCollapsed, iconOpened } = this.state;
    this.animatable.rotate(0);
    this.setState({
      show: !show,
      icon: show ? iconCollapsed : iconOpened,
    });
  };

  renderCollapsible = () => {
    const { tintColor, iconSize, children, badgeText } = this.props;
    const { icon, fadeAnim, title, spinValue } = this.state;

    return (
      <View style={{ backgroundColor: '#fff', width: '100%' }}>
        <TouchableNativeFeedback
          onPress={this.toggleView}
          delayPressIn={0}
          delayPressOut={0}
          useForeground={true}
          background={RippleColor('#ccc')}>
          <View style={styles.bar}>
            <MaterialIcons
              name={'videogame-asset'}
              size={25}
              color={'#4CAF50'}
            />
            <Text style={[styles.title]}>{title}</Text>
            <View
              style={{
                //backgroundColor: '#f23521',
                flexDirection: 'row',
                justifyContent: 'flex-end',
                flex: 1,
                marginRight: 5,
              }}>
              {badgeText && (
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 15,
                    backgroundColor: '#1194ff',
                    borderRadius: 4,
                    padding: 5,
                    fontWeight: 'bold',
                    marginRight: 5,
                  }}>
                  {badgeText}
                </Text>
              )}
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <AnimatedIcon
                  ref={ref => {
                    this.animatable = ref;
                  }}
                  name={'chevron-down'}
                  size={iconSize}
                />
              </View>
            </View>
          </View>
        </TouchableNativeFeedback>
        {this.state.show && (
          <Animated.View style={{ opacity: fadeAnim }}>
            {children}
          </Animated.View>
        )}
      </View>
    );
  };

  render() {
    return this.renderCollapsible();
  }
}

const styles = StyleSheet.create({
  bar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 15,
    paddingLeft: 15,
    paddingBottom: 15,
    //backgroundColor: "#cccaaa"
  },

  title: {
    color: '#000',
    //marginTop: 16,
    marginLeft: 30,
    //marginBottom: 16,
    fontSize: 13,
    textAlign: 'left',
    fontWeight: 'bold',
  },
});

我在哪里做错了？