'react-native-animatable'和hooks错误

Question

我正在为带有钩子和react-native-animatable的图标设置动画，但是使用useRef钩子却出现错误。错误为undefined is not an object (evaluating 'iconRef.current.animatable.transitionTo')。

我正在尝试确定这是库问题还是使用useRef或库方法的问题。最后，我希望在按下按钮时旋转图标。

可复制的小吃here。

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/Entypo';
import * as Animatable from 'react-native-animatable';
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

const App = () => {
  const iconRef = React.useRef(null);
  const [rotated, setRotated] = React.useState(true);

  return (
    <View>
      <TouchableOpacity
        style={styles.container}
        onPress={() => {
          setRotated(!rotated);
          iconRef.current.animatable.transitionTo({
            transform: rotated ? [{ rotate: '0deg' }] : [{ rotate: '90deg' }],
          });
        }}>
        <Text style={{ fontSize: 30 }}>Press Me</Text>
      </TouchableOpacity>
      <AnimatedIcon
        name="chevron-small-right"
        ref={iconRef}
        size={50}
        style={{
          transform: [{ rotate: '0deg' }],
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    marginTop: 50,
  },
});

export default App;