0

我正在使用 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,
    }
})
4

1 回答 1

0

您在 View 内没有任何东西，要添加一些图标，如下所示

 <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';
于 2021-06-16T15:17:31.480 回答