React本机动画未运行

Question

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

代码：

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

Answer 1

你在视图中没有任何东西，为了动画添加一些图标，如下所示

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

请注意，您需要安装和导入任何图标库，我使用expo

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