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

Question

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

下面的代码我正在导入{useSpring, animated} from 'react-spring'。 我创建了简单的 useSpring 函数 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>
};

此外，我在下面尝试了这种方法来利用“动画”库来包装 VIEW 内容。 但是我收到一条错误消息stating 'Invariant Violation: Element type is invalid expected a string or a class/function but got: undefined。

    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(View)。然而，屏幕的不透明度并没有改变，我看不到动画的变化。

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

只有 html 元素可以作为动画常量访问。例如，div 可以作为 animated.div 访问。对于本机反应和您自己的组件，没有这样的常量。您必须创建一个带有动画的新组件。而且你必须使用这个新的而不是普通的 View。

创建一个新组件：

const AnimatedView = animated(View)

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

Answer 2

添加导入

import { Animated} from 'react-native'

改变

return <Animated.View>