React-Spring错误：React-Spring返回的“动画”库错误元素类型无效

Question

我正在尝试制作一个简单的动画，我的图像将淡入其中。

下面的代码我导入{useSpring，动画}从'react-Spring'。我创建简单的使用Spring函数logoLoadingScreen。然后我在IMAGE的样式中添加了函数；然而，没有显示动画。

import React from 'react';
import {useSpring, animated} from 'react-spring'
import {View,Text,StyleSheet,Image} from 'react-native';

const logoReParty = () =>{
    require('../img/img1.jpg')
}

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 1
        }
    });


    return <View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </View>
};

另外，我尝试了下面的方法来利用动画库来包装视图内容。然而，我得到一个错误消息声明不变违反：元素类型是无效的预期字符串或类/函数，但得到：未定义。

    return <animated.View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </animated.View>
};

如何使用react spring在图像上显示淡入淡出动画？此外，如何在整个屏幕上显示淡入淡出动画？

谢谢：）

更新

正如下面提到的，我创建了新的const AnimatedView=animated（视图）。然而，屏幕的不透明度没有改变，我在动画中也没有看到任何变化。

const AnimatedView = animated(View);

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 0.2
        }
    });


    return <AnimatedView style={logoLoadingScreen}>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </AnimatedView>
};

动画没有出现在屏幕上的可能原因是什么？仅供参考：没有更多的错误，而是没有动画显示在屏幕上。再次感谢您的帮助！^^

已解决

添加淡入淡出风格，解决了我的动画问题。

return <AnimatedView style={logoLoadingScreen,fade}>

感谢那些帮助我的人：）

Answer 1

添加导入

从反应本机导入{Animated}

改变

return <Animated.View>

Answer 2

在动画中，只有html元素可以作为常量访问。例如，div可以作为动画进行访问。对于react native和您自己的组件，没有此类常量。必须创建具有动画的新零部件。你必须用这个新的而不是普通的视图。

创建一个新组件：

const AnimatedView = animated(View)

return <AnimatedView style={logoLoadingScreen, ...fade}>