React native 无法运行本机动画

我正在使用react native animatable library设置加载图标的动画。在我决定将它用于我的新项目之前，我已经有一段时间没有接触过它了。当我将它添加到我的代码中时，它可以做任何事情，我真的很困惑为什么它没有运行。加载程序在视觉上存在，但没有动画。我不知道是什么问题，因为我上次使用它工作得很好

守则：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import * as Animatable from 'react-native-animatable';

import constansts from "../../assets/constants"

export default function Loading(){
    const flipAnim = {
        0: {
            transform: [{rotate: "0deg"}]
        },
        0.25: {
            transform: [{rotate: "180deg"}]
        },
        0.5: {
            transform: [{rotate: "180deg"}]
        },
        0.75: {
            transform: [{rotate: "360deg"}]
        },
        1: {
            transform: [{rotate: "360deg"}]
        }
    }

    const fillAnim = {
        0: {
            height: "0%"
        },
        0.25: {
            height: "0%"
        },
        0.5: {
            height: "100%"
        },
        0.75: {
        height: "100%"
        },
        1: {
            height: "0%"
        }
    }
    
    return (
        <View style={styles.loadingCon}>
            <Animatable.View 
                style={styles.loader} 
                animation={flipAnim}
                duration={2000}
                iterationCount="infinite"
                easing="linear"
            >
                <Animatable.View
                    style={styles.loaderInner}
                    animation={fillAnim}
                    duration={2000}
                    iterationCount="infinite"
                    easing="linear"
                >
                </Animatable.View>
            </Animatable.View>
        </View>
    )
}

const styles = StyleSheet.create({
    loadingCon: {
        height: "100%",
        justifyContent: "center",
        alignItems: "center"
    },
    loader: {
        width: 40,
        height: 40,
        borderWidth: 5,
        borderColor: constansts.colors.blues,
        borderRadius: 4
    },
    loaderInner: {
        width: "100%",
        backgroundColor: constansts.colors.blues,
    }
})

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从“react native Animatable”导入*作为可设置动画；
从“../../assets/constants”导入常量
导出默认函数加载（）{
常数flipAnim={
0: {
变换：[{旋转：“0deg”}]
},
0.25: {
变换：[{旋转：“180度”}]
},
0.5: {
变换：[{旋转：“180度”}]
},
0.75: {
变换：[{旋转：“360度”}]
},
1: {
变换：[{旋转：“360度”}]
}
}
常数fillAnim={
0: {
高度：“0%”
},
0.25: {
高度：“0%”
},
0.5: {
身高：“100%”
},
0.75: {
身高：“100%”
},
1: {
高度：“0%”
}
}
返回(
)
}
const styles=StyleSheet.create({
装载控制：{
高度：“100%”，
辩护内容：“中心”，
对齐项目：“中心”
},
加载器：{
宽度：40，
身高：40，
边框宽度：5，
borderColor:constansts.colors.blues，
边界半径：4
},
装卸工：{
宽度：“100%”，
背景颜色：constansts.colors.blues，
}
})

视图中没有任何内容，要设置动画，请添加一些图标，如下所示

 <View style={styles.loadingCon}>
  <Animatable.View
    style={styles.loader}
    animation={flipAnim}
    duration={2000}
    iterationCount="infinite"
    easing="linear"
  >
    <Animatable.View
      style={styles.loaderInner}
      animation={fillAnim}
      duration={2000}
      iterationCount="infinite"
      easing="linear"
    >
      <Feather name="loader" size={24} color="black" />
    </Animatable.View>
  </Animatable.View>
</View>;

  import { Feather } from '@expo/vector-icons';